div背景显示bug看起来与使用具有3个z-index级别的css网格区域的属性无关

问题描述 投票：0回答：1

我正在尝试使用CSS Grid构建一个完整的网站进行布局。目标是像素完美响应goal

目前的迭代是all done except that background bug on the call to action

如您所见，投资组合按钮的下边框表现不正确。所有边框的边长应为2px。底部太大，尽管涉及的3个div设置的是完全相同的尺寸减去边缘的边距，这是预期的。在任何页面大小上，只有底部边框的行为不正确。

将渐变边框放置到号召性用语的目标解决方案是在3个z索引级别上制作div：一个背景级别1是一个渐变，带边框的整个大小，一个级别为2的实际框子是相同的size -2px用于从边框创建2px背景，以及一个实际包含txt内容的3级div。

我尝试设置一个特定的大小，玩填充和字体行高，但它只是增加按钮内的黑色区域的大小，并将bug进一步推到底部而不影响其大小。

我不知道发生了什么，所以我包括所有代码只是为了确定。有缺陷的按钮部分位于CSS中的**之间。

body {
  background-color: #0F0F0F;
}

#container {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(20, 5%);
  grid-template-areas: 'va va va va va va va va va va va va va va va va va va va va' 
  'va va va va va va va va va va va va va va va va va va va va' 
  'va va va va va va va va va va va va va va va va va va va va' 
  'va va va va va va va va va va va va va va va va va va va va' 
  'vb vb vb ho ho ho ho ho ho ho ho ho ho ho ho ho ho vc vc vc' 
  'vd vd vd vd vd vd lc lc lc lc lc lc ve ve ve ve ve ve ve ve' 
  'vf vf vf vf vf vf vf vf vf vf vf vf vf vf vf vf vf vf vf vf' 
  'vg vg vg vg vg vg vg vg vg vg vg vg vg vg vg vg vg vg vg vg' 
  'vh vh vh vh vh vh vh vh pf pf pf vi vi vi vi vi vi vi vi vi' 
  'vj vj vj vj vj vj vj vj vj vj vj vj vj vj vj vj vj vj vj vj' 
  'vj vj vj vj vj vj vj vj vj vj vj vj vj vj vj vj vj vj vj vj' 
  'vj vj vj vj vj vj vj vj vj vj vj vj vj vj vj vj vj vj vj vj' 
  'vk vk vk vk vk vk vk vk vk tb vl vl vl vl vl vl vl vl vl vl';
}


/*txt */

#hero,
#portfolio {
  font-family: ChanticleerRoman, serif;
  color: #CD8F8F;
}


/*spacing method 2 */

#voidA {
  grid-area: va;
}

#voidB {
  grid-area: vb;
}

#voidB {
  grid-area: vc;
}

#voidD {
  grid-area: vd;
}

#voidE {
  grid-area: ve;
}

#voidF {
  grid-area: vf;
}

#voidG {
  grid-area: vg;
}

#voidH {
  grid-area: vh;
}

#voidI {
  grid-area: vi;
}

#voidJ {
  grid-area: vj;
}

#voidK {
  grid-area: vk;
}

#voidK {
  grid-area: vl;
}


/*content */

#hero {
  grid-area: ho;
  font-size: 3.875em;
}

#void2 {
  grid-row: 8 /span 1;
  grid-column: 1 / span 7;
}

#languagechoice {
  grid-area: lc;
  display: inline-flex;
}

#languagechoice>div {
  padding: 12.5%;
}

#engflag,
#fraflag {
  width: 150px;
  height: 100px;
  margin: 4px 3px 0px 3px;
}

#eng,
#fra {
  background: -webkit-linear-gradient(180deg, rgb(128, 77, 77) 0%, rgb(205, 143, 143) 80%);
  background: -o-linear-gradient(180deg, rgb(128, 77, 77) 0%, rgb(205, 143, 143) 80%);
  background: -moz-linear-gradient(180deg, rgb(128, 77, 77) 0%, rgb(205, 143, 143) 80%);
  background: linear-gradient(180deg, rgb(128, 77, 77) 0%, rgb(205, 143, 143) 80%);
  z-index: 2;
}

.gradient-holder {
  background-color: #0F0F0F;
  z-index: 2;
}

**#portfolio {
  font-size: 2.250em;
  text-align: center;
  margin: 2px 2px 2px 2px;
  z-index: 3;
  grid-area: pf;
}

.gradient-holder-pf {
  margin: 2px 2px 2px 2px;
  padding: 0px 0px 0px 0px;
  background-color: #0F0F0F;
  z-index: 2;
  grid-area: pf;
}

#portfolio-box {
  background: -webkit-linear-gradient(180deg, rgb(128, 77, 77) 0%, rgb(205, 143, 143) 80%);
  background: -o-linear-gradient(180deg, rgb(128, 77, 77) 0%, rgb(205, 143, 143) 80%);
  background: -moz-linear-gradient(180deg, rgb(128, 77, 77) 0%, rgb(205, 143, 143) 80%);
  background: linear-gradient(180deg, rgb(128, 77, 77) 0%, rgb(205, 143, 143) 80%);
  z-index: 1;
  grid-area: pf;
}

** #toblog {
  height: 10px;
  width: 10px;
  background-color: #F8F8F8;
  border-radius: 50%;
  grid-area: tb;
  margin: 0% 0% 0% 39%;
}
<!DOCTYPE html>

<head>
  <link rel="stylesheet" href="css-prehome.css">
</head>

<body>
  <div id="container">
    <div id="sitemap"></div>
    <b id="voidA"></b>
    <b id="voidB"></b>
    <b id="voidC"></b>
    <b id="voidD"></b>
    <b id="voidE"></b>
    <b id="voidF"></b>
    <b id="voidG"></b>
    <b id="voidH"></b>
    <b id="voidI"></b>
    <b id="voidJ"></b>
    <b id="voidK"></b>
    <b id="voidL"></b>
    <div id="hero">
      <p>Experience is born from exploration</p>
    </div>
    <div id="languagechoice">
      <div class="gradient-holder">
        <div id="eng"><img id="engflag" src="gb.png" /></div>
      </div>
      <div class="gradient-holder">
        <div id="fra"><img id="fraflag" src="fr.png" /></div>
      </div>
    </div>
    <div id="portfolio-box">
      <div class="gradient-holder-pf">
        <div id="portfolio">Portfolio</div>
      </div>
    </div>
    <div id="toblog"></div>
    <aside id="Contacts-methods"></aside>
  </div>
</body>
<footer>
</footer>
html css
1个回答
0
投票

试试这个

#container {
  width: 100% [OR] auto;
}


body {
  background-color: #0F0F0F;
}

#container {
  width: 100%;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(20, 5%);
  grid-template-areas: 'va va va va va va va va va va va va va va va va va va va va' 
  'va va va va va va va va va va va va va va va va va va va va' 
  'va va va va va va va va va va va va va va va va va va va va' 
  'va va va va va va va va va va va va va va va va va va va va' 
  'vb vb vb ho ho ho ho ho ho ho ho ho ho ho ho ho ho vc vc vc' 
  'vd vd vd vd vd vd lc lc lc lc lc lc ve ve ve ve ve ve ve ve' 
  'vf vf vf vf vf vf vf vf vf vf vf vf vf vf vf vf vf vf vf vf' 
  'vg vg vg vg vg vg vg vg vg vg vg vg vg vg vg vg vg vg vg vg' 
  'vh vh vh vh vh vh vh vh pf pf pf vi vi vi vi vi vi vi vi vi' 
  'vj vj vj vj vj vj vj vj vj vj vj vj vj vj vj vj vj vj vj vj' 
  'vj vj vj vj vj vj vj vj vj vj vj vj vj vj vj vj vj vj vj vj' 
  'vj vj vj vj vj vj vj vj vj vj vj vj vj vj vj vj vj vj vj vj' 
  'vk vk vk vk vk vk vk vk vk tb vl vl vl vl vl vl vl vl vl vl';
}


/*txt */

#hero,
#portfolio {
  font-family: ChanticleerRoman, serif;
  color: #CD8F8F;
}


/*spacing method 2 */

#voidA {
  grid-area: va;
}

#voidB {
  grid-area: vb;
}

#voidB {
  grid-area: vc;
}

#voidD {
  grid-area: vd;
}

#voidE {
  grid-area: ve;
}

#voidF {
  grid-area: vf;
}

#voidG {
  grid-area: vg;
}

#voidH {
  grid-area: vh;
}

#voidI {
  grid-area: vi;
}

#voidJ {
  grid-area: vj;
}

#voidK {
  grid-area: vk;
}

#voidK {
  grid-area: vl;
}


/*content */

#hero {
  grid-area: ho;
  font-size: 3.875em;
}

#void2 {
  grid-row: 8 /span 1;
  grid-column: 1 / span 7;
}

#languagechoice {
  grid-area: lc;
  display: inline-flex;
}

#languagechoice>div {
  padding: 12.5%;
}

#engflag,
#fraflag {
  width: 150px;
  height: 100px;
  margin: 4px 3px 0px 3px;
}

#eng,
#fra {
  background: -webkit-linear-gradient(180deg, rgb(128, 77, 77) 0%, rgb(205, 143, 143) 80%);
  background: -o-linear-gradient(180deg, rgb(128, 77, 77) 0%, rgb(205, 143, 143) 80%);
  background: -moz-linear-gradient(180deg, rgb(128, 77, 77) 0%, rgb(205, 143, 143) 80%);
  background: linear-gradient(180deg, rgb(128, 77, 77) 0%, rgb(205, 143, 143) 80%);
  z-index: 2;
}

.gradient-holder {
  background-color: #0F0F0F;
  z-index: 2;
}

**#portfolio {
  font-size: 2.250em;
  text-align: center;
  margin: 2px 2px 2px 2px;
  z-index: 3;
  grid-area: pf;
}

.gradient-holder-pf {
  margin: 2px 2px 2px 2px;
  padding: 0px 0px 0px 0px;
  background-color: #0F0F0F;
  z-index: 2;
  grid-area: pf;
}

#portfolio-box {
  background: -webkit-linear-gradient(180deg, rgb(128, 77, 77) 0%, rgb(205, 143, 143) 80%);
  background: -o-linear-gradient(180deg, rgb(128, 77, 77) 0%, rgb(205, 143, 143) 80%);
  background: -moz-linear-gradient(180deg, rgb(128, 77, 77) 0%, rgb(205, 143, 143) 80%);
  background: linear-gradient(180deg, rgb(128, 77, 77) 0%, rgb(205, 143, 143) 80%);
  z-index: 1;
  grid-area: pf;
}

** #toblog {
  height: 10px;
  width: 10px;
  background-color: #F8F8F8;
  border-radius: 50%;
  grid-area: tb;
  margin: 0% 0% 0% 39%;
}
<head>
   <link rel="stylesheet" href="css-prehome.css">
</head>
<body>
  <div id="container">
    <div id="sitemap"></div>
    <b id="voidA"></b>
    <b id="voidB"></b>
    <b id="voidC"></b>
    <b id="voidD"></b>
    <b id="voidE"></b>
    <b id="voidF"></b>
    <b id="voidG"></b>
    <b id="voidH"></b>
    <b id="voidI"></b>
    <b id="voidJ"></b>
    <b id="voidK"></b>
    <b id="voidL"></b>
    <div id="hero">
      <p>Experience is born from exploration</p>
    </div>
    <div id="languagechoice">
      <div class="gradient-holder">
        <div id="eng"><img id="engflag" src="gb.png" /></div>
      </div>
      <div class="gradient-holder">
        <div id="fra"><img id="fraflag" src="fr.png" /></div>
      </div>
    </div>
    <div id="portfolio-box">
      <div class="gradient-holder-pf">
        <div id="portfolio">Portfolio</div>
      </div>
    </div>
    <div id="toblog"></div>
    <aside id="Contacts-methods"></aside>
  </div>
</body>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.