<分区>
<分区>
2 个 css 背景:1 个纯图像和 1 个用重复的点覆盖图像。 图片需要使用样式“background-size: cover;”进行拉伸(stretch)
这些点只是为了重复，而不是拉伸(stretch)，所以应用了以下 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”也不能解决问题，因为它拉伸(stretch)了点(参见 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;
}
如何让图片拉伸(stretch)但点重复？
最佳答案
更改为 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>关于html - 2 个 CSS 背景和封面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58922790/