Question

我希望h标签的背景颜色从元素本身后面重复到浏览器窗口的边缘 - 即从左侧到右侧直到元素本身。

我开始讨论：之前 - 但是无法想出实现这种风格的方法 - 任何人都可以提供任何帮助..

.tit-rep:before{
  content:"";
  display:block;
}

https://jsfiddle.net/qd0kn19k/

Answer 1

您应该将.tit-tep设置为position:relative，将:before设置为position:absolute。

然后您需要延长:before，最简单的方法是使用vw单位。

.tit-rep{position:relative} /*add it to your existing rule*/
.tit-rep:before{
  content:"";
  position:absolute;
  top:0;
  right:100%; /*make it extend to the left*/
  width:50vw; /*50% of browser width*/
  height:100%;
  background:red;
}

在https://jsfiddle.net/qd0kn19k/2/

更新了演示

Answer 2

也许这样才能让你朝着正确的方向前进。

.tit-rep:before{
  content:"";
  display:block;
  position:absolute;
  width:100%;
  left:0;
  height:30px;
  background:red;
}

Answer 3

将元素中的所有背景细节移动到:before伪元素

请参阅此fiddle

CSS在元素之前重复背景 - 到浏览器的边缘

3 个答案: