2 css 背景和封面

Question

2 css 背景：1 张纯图像和 1 张用重复的点覆盖图像。图像需要使用样式 "background-size: cover;"

进行拉伸

这些点只是为了重复，而不是拉伸，所以应用以下 CSS：

.mybackground_pic
{
  height: 1000px;
  width: 1000px;
  background-image: url(https://hubskills.com/wp-content/uploads/black-dots.png),
  url(https://upload.wikimedia.org/wikipedia/commons/8/81/Bryce-demo-RedDawn.jpg);
  background-size: unset, cover;
}

但上面的代码导致封面不起作用（图像重复，参见https://codepen.io/jacopsd/pen/MWWZdaX）

2n 尝试：省略 "unset" 也无法解决问题，因为它会拉伸点（参见 https://codepen.io/jacopsd/pen/xxxmNvV）：

.mybackground_pic
{
  height: 1000px;
  width: 1000px;
  background-image: url(https://hubskills.com/wp-content/uploads/black-dots.png),
  url(https://upload.wikimedia.org/wikipedia/commons/8/81/Bryce-demo-RedDawn.jpg);
  background-size: cover;
}

如何让图像拉伸但点重复？

Answer 1

改为background-size: auto, cover：

.mybackground_pic {
  height: 1000px;
  width: 1000px;
  background: url(https://hubskills.com/wp-content/uploads/black-dots.png), url(https://upload.wikimedia.org/wikipedia/commons/8/81/Bryce-demo-RedDawn.jpg);
  background-size: auto, cover;
}

<div class="mybackground_pic">
</div>

Answer 2

试试这个：

.mybackground_pic
{
  height: 1000px;
  width: 100%;
  background-image: url(https://hubskills.com/wp-content/uploads/black-dots.png),
  url(https://upload.wikimedia.org/wikipedia/commons/8/81/Bryce-demo-RedDawn.jpg);
  background-size: auto, cover;
}

2 css 背景和封面

2 css backgrounds & cover

html

css

background-image