需求
开发的时候遇到需要将背景图片旋转-45度。这样的效果。
UI给的图片是正的。
方法
第一想到的是通过设置css3样式的transform: rotate(-45deg)。
问题
但是发现内容也跟着旋转了。
解决
所以把背景图放到伪类中进行旋转就可以完美解决这个问题了
.bgimg1{
position: relative;
}
.bgimg1::after {
content: "";
position: absolute;
right: 30px;
top: 0;
width: 108px;
height: 108px;
display: block;
background-size: 108px 108px;
background-repeat: no-repeat;
background-position: right top;
background-image: url('./images/state1.png');
transform: rotate(-45deg);
opacity: 0.8;
}
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/188421.html
