html - div 背景显示错误似乎与使用具有 3 个 z-index 级别的 css 网格区域的属性无关-6ren

html - div 背景显示错误似乎与使用具有 3 个 z-index 级别的 css 网格区域的属性无关

转载作者：行者123 更新时间：2023-11-28 01:23:12

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

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

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

将渐变边框添加到号召性用语的预期解决方案是在 3 个 z-index 级别上制作 div:一个背景级别 1，它是渐变框的全尺寸带边框，一个级别 2 实际框，它大小相同 -2px 以从边框创建 2px 背景，以及一个实际包含 txt 内容的 3 级 div。

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

我不知道发生了什么，所以我包含了所有代码以确保万无一失。有问题的按钮部分在 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>

最佳答案

试试这个

#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>

关于html - div 背景显示错误似乎与使用具有 3 个 z-index 级别的 css 网格区域的属性无关，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51380152/

文章推荐： javascript - 清除 flexbox 列

文章推荐： javascript - 使用 jQuery、JS 或 PHP 下载目录中的所有文件？

文章推荐： javascript - 当我添加 .text() 时，简单的 d3.js 条形图会反转

文章推荐： c++ - samplerCube 数组

html - 给定布局的 Bootstrap 网格(或 IE 兼容的 CSS 网格)
您能否建议如何在 Bootstrap 或 IE 兼容的 CSS 网格中，在没有 CSS 网格的情况下进行以下布局。在大屏幕中头部，左侧堆叠的 body 和右侧覆盖头部和 body 高度的图像。 [
ios - 如何在 Objective-C 中使用 for 循环将 View 创建为网格(例如 9*9 网格、15*15 网格)
我想在 Objective-C 中绘制一个 15*15 的网格。格子颜色是蓝色的，就像在诺基亚制作“贪吃蛇”游戏的棋盘一样。我试过使用 for 循环来创建 subview ，但它似乎不起作用，我查看
具有自动填充和自动大小的 CSS 网格
我正在尝试将 CSS 网格与 grid-template-columns: repeat(auto-fill, auto) 一起使用，单元格被设置为最大宽度，导致每行一个元素。 p> 是否可以让元素宽
Magento，网格，添加带有网站链接的列
我正在努力在网格的自定义列上添加一个指向网站的简单、简单的链接。我用了 Inchoo blog为列添加自定义渲染器，它可以工作。我认为只需修改渲染并添加标签就足够了。但我的希望破灭了，行不通。如何做
具有交替线条样式的 Gnuplot 网格
使用 Gnuplot 我绘制了下图 - 现在，正如您在图像中看到的那样，很难在线条之间识别出其末端的块。所以我想用不同的颜色或样式交替着色网格。我现在用来给网格着色的代码是 - set style
WPF 网格 - 绘制自定义网格线
假设我有一个非常简单的 WPF 网格(6 行 x 6 列)，定义如下:
具有动态列的 wpf 网格
我有一个希望绑定(bind)到 WPF 网格的集合。我面临的问题是列数是动态的并且取决于集合。这是一个简单的模型: public interface IRows { string Messa
java - 如何手动填充表格/网格
我正在使用 Vaadin 8，我想制作某种混淆矩阵。我想知道是否可以根据单元格位置而不是数据提供者手动填充表格/网格的值。 referenceTable.addColumn(reference ->
悬停时带有单行的 CSS 网格
我在 http://jsfiddle.net/TsRJy/ 上创建了一个带有 div 框的网格. 问题我不知道如何使 a:hover 工作。信息重写 HTML 代码，因为表格不适合我。 http
具有自动宽度和高度的 Silverlight 网格
银光处女在这里。如何使网格周围的用户控件自动调整大小以适应内部网格宽度？目前，当浏览器窗口更宽时，用户控件的显示尺寸约为 300 或 400 像素。它在数据网格周围呈现垂直和水平滚动条，这很丑陋。我想
CSS 网格 - 将所有子项保持在一行且间距相等
这个问题已经有答案了: Equal width columns in CSS Grid (11 个回答) 已关闭 2 年前。使用 CSS Grid，当您不知道会有多少个子项时，如何将所有子项保留在一
CSS 网格，中间有一个额外的包装器
我想使用 CSS Grid 的 grid-template-areas。但问题是我正在使用的 CMS 添加了大量额外的包装器。有没有办法忽略额外的包装？因为它弄乱了漂亮的网格区域...... 我正在
extjs - 网格-按钮单击处理程序
在我的Grid中，当我单击“操作”按钮(下面的代码中显示的“删除和编辑”按钮)时，我需要弹出一个窗口，而不用警告消息提醒用户；在下面的代码中，我正在使用HANDLER handler: button
CSS 网格 - 将所有子项保持在一行且间距相等
这个问题已经有答案了: Equal width columns in CSS Grid (11 个回答) 已关闭 2 年前。使用 CSS Grid，当您不知道会有多少个子项时，如何将所有子项保留在一
grid - 网格/仓库布局上离散事件模拟的可视化
我需要模拟一个仓库，其中有几辆自动驾驶车辆在给定的布局上移动，并具有简单的优先级规则。根据我的理解，这个问题可以通过离散事件模拟(DES)轻松解决，我会使用 SimPy为了这。我看到的问题是，我似乎
跨用户控件的 WPF 网格？
在 ASP.NET 中，我可以让用户控件在页面上的表格中占据多个单元格: 用户控件1: foo bar 第1页: 并且自动调整列宽以适应最大的用户控件。这也可以在 WPF
Jquery 实时搜索和复选框过滤器、网格
我正在寻找一种方法来实时搜索我的网格+要过滤的复选框。我有一个包含学生的网格(照片和姓名)。我想要的是有一个复选框，可以过滤学生所在的不同类(class)。还有一个搜索栏，我可以在其中输入学生姓名。
具有自动完成功能的 jQuery 网格
我正在使用 jQuery 和 jQuery UI 构建一个 Web 应用程序。我陷入了僵局。我需要的是一个 jQuery 网格，它具有可编辑字段，并以某种方式在这些可编辑单元格之一上合并一个自动完成字
具有多个分组的 Javascript 网格
我想知道是否有其他 JavaScript 组件可以提供具有多个分组的网格表示。下面是jqGrid的截图我扩展了允许该功能，但它需要获取所有数据。我希望在扩展分组时加载数据。另一个修改后的 jqGri
CSS:网格、滚动条和工具提示问题
我一直在为我将在此处描述的 CSS 问题而烦恼: 在下面的示例 ( https://codesandbox.io/s/jjq4km89y5 ) 中，您可以看到一个可滚动的内容(紫色背景)和一个被左侧面

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - div 背景显示错误似乎与使用具有 3 个 z-index 级别的 css 网格区域的属性无关