css 背景图旋转 只让背景图片旋转180度的实现示例

 

最近进行二次开发的时候有个图片用背景图要旋转一定角度。

下图中如果只给.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);
   }