Question

我使用以下样式创建一个不透明的背景图像（对于整个页面），该图像会拉伸以适合浏览器宽度。我能够使图像垂直重复吗？

我已经尝试了background-repeat: repeat-y;，但它无法满足我的需要。

CSS

html:after {
  content : "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url('backdrop.png'); 
  background-size: cover;
  width: 100%;
  height: 100%;
  opacity : 0.2;
  z-index: -1;
}

Answer 1

尝试在html上添加它（不在：之后）。

html {
  background: url("backdrop.png") left top repeat-y;
  .
  .
}

Answer 2

请尝试使用以下代码：

html{
 content : "";
 display: block;
 position: absolute;
 background-repeat: repeat-y;
 top: 0;
 left: 0;
 background-image: url('backdrop.png'); 
 background-size: cover;
 opacity : 0.2;
 z-index: -1;
}

即。删除after和width height 100％并添加repeat-y

背景图像延伸到浏览器宽度＆amp;重复Y＆amp;不透明？

CSS

2 个答案: