html - 背景图像拉伸(stretch)到浏览器宽度并重复 Y 且不透明？

Question

我正在使用以下样式创建一个不透明的背景图像(用于整个页面)，它会拉伸(stretch)以适应浏览器宽度。我还能让图像垂直重复吗？

我已经尝试过 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 中(而不是在 :after 中)。

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