CSS 背景图像，带旋转、重复和不透明度

Question

我正在尝试使用图像制作漂亮的背景，但我希望图像重复以填充屏幕，不透明度设置为 0.5 并旋转 45 度。 我已经尝试了很多方法来实现这一点，但没有运气。 有人有想法么？

在这个 Codepen 中，我让图像旋转且不透明，但无法让背景重复工作。

 .background { height: 500px; width: 500px; position: relative; display: inline-block; padding: 100px; border: black 3px solid; }.background::before { content: ""; position: absolute; overflow: hidden; width: 100px; height: 100px; left: 0; top: 0; z-index: -1; opacity: 0.5; background: url(https://cambridgewords.files.wordpress.com/2019/11/funny.jpg); background-size: contain; transform: rotate(45deg); background-repeat: repeat; opacity: 0.5; }

 <span class='background'>HElloWorld</span>

Answer 1

你可以这样做：

 .background { height: 500px; width: 500px; position: relative; z-index:0; display: inline-block; overflow:hidden; /* hide the overflow here not on the pseudo element */ padding: 100px; border: black 3px solid; }.background::before { content: ""; position: absolute; z-index: -1; /* 141% ~ sqrt(2)x100% to make sure to cover all the area after the rotation */ width: 141%; height:141%; /**/ /* to center*/ left: 50%; top: 50%; /* */ background: url(https://cambridgewords.files.wordpress.com/2019/11/funny.jpg); background-size: 100px 100px; /* size of the image*/ transform:translate(-50%,-50%) rotate(45deg); /* center the element then rotate */ opacity: 0.5; }

 <span class='background'> HElloWorld </span>

Answer 2

尝试增加::before伪元素的大小，然后像这样减小背景大小：

.background::before {
    content: "";
    position: absolute;
    overflow: hidden;
    width: 100%; /* made width 100% */
    height: 100%; /* made height 100% */
    left: 0;
    top: 0;
    z-index: -1;
    opacity: 0.5;
    background: url(https://cambridgewords.files.wordpress.com/2019/11/funny.jpg);
    background-size: 100px; /* made background size smaller */
    transform: rotate(45deg);
    background-repeat: repeat;
    opacity: 0.5;
}

这只是使背景伪元素成为元素的全尺寸，然后使背景变小并重复。 我希望这有帮助。