我正在尝试用图像制作一个漂亮的背景，但我希望重复图像以填充屏幕，不透明度设置为 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>
你可以像下面这样做：
.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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
