最近进行二次开发的时候有个图片用背景图要旋转一定角度。
下图中如果只给.question添加背景通过CSS3的transfrom rotate肯定是会影响文字的展示。
所以把背景图放到伪类中进行旋转就可以完美解决这个问题了,话不多说,上代码。
.des-item-7 .inner-box .question{
position:relative;
font-size: 16px;
font-family: CenturyGothic;
font-weight: 400;
color: #000000;
cursor: pointer;
}
.des-item-7 .inner-box .question::after{
content:'';
position:absolute;
right:0;
top:50%;
width:15px;
height:9px;
transform:translate(0,-50%);
display:block;
background-image: url('{{ "question_arrow.jpg" | asset_url}}');
background-repeat: no-repeat;
background-position:right 0 center;
}
.des-item-7 .inner-box .active::after{
transition:all 0.5s;
transform: rotate(180deg);
}