此问题已经在这里有了答案:
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尝试:遗漏“未设置”也无法解决,因为它会拉紧点(请参见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; }
如何使图像张紧但点重复出现?
2个CSS背景:1个普通图像和1个带有重复点的图像以覆盖图像。图像需要使用“ background-size:cover;”样式拉伸。点只是要重复,而不是张扬...
更改为background-size: auto, cover
:
尝试一下: