Question

我对css有一个很大的问题。有没有＆＃34;快速＆＃34;在＆＃34; div stripe＆＃34;下添加水平背景的方法在整个页面宽度？我有一些重要的内容，我想突出它。

我的网页代码如下：

<body>
<div wrapper width=1200px>
<div content>
<some h1>
<some boxes>
<div stripe>
     //some important stuff what i want highlight
</div>
</div>
</div >
</body>

亲切的问候标记

Answer 1

<body>
<div id = ' wrapper' style = " width=1200px">
<div id='content'>

<div id='stripe'>
     //some important stuff what i want highlight
</div>
</div>
</div >
</body>

对于上面的HTML添加了以下CSS

#stripe{
    background-color:red;
}

通过id可以在div下分配颜色或图像。

The Fiddle

Answer 2

我认为伪元素在这里效果最好。

你可以在它上面使用颜色甚至是背景图像......而且这个也是如此。

＆＃13;

.container {
  max-width: 80%;
  margin: 0 auto;
}
.container div {
  height: 50px;
  border: 1px solid black;
}
.stripe {
  position: relative;
}
.stripe::before {
  content: '';
  position: absolute;
  left: 50%;
  height: 100%;
  width: 100vw;
  transform: translateX(-50%);
  background: lightblue;
  z-index: -1;
}

＆＃13;

<div class="container">
  <div></div>
  <div class="stripe"></div>
  <div></div>
</div>

＆＃13;

盒装页面中的CSS水平条纹背景

2 个答案: