本文介绍了具有旋转、重复和不透明度的CSS背景图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试用图像做一个漂亮的背景，但是我想要重复图像来填满屏幕，不透明度设置为0.5，并且它旋转了45度。我已经尝试了很多方法来完成这件事，但都没有成功。有谁有主意吗？
在此代码中，我对图像进行了旋转和不透明处理，但无法使背景重复工作。
.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>这篇关于具有旋转、重复和不透明度的CSS背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！