css3 background-position属性

1、原图

 

 2、实现功能

　　

 

 3、代码

<div @click="showState" :class="showFlag?'fd_flag':'fd_flag2'">

<script>

export default {
  name: "index",
    components: {

    },
  data() {
    return {
      showFlag:true,
       };
  },
    created() {
    },
    mounted() {

    },
  methods: {
    showState(){
                this.showFlag=!this.showFlag
            },
    
  },
};
</script>

.fd_flag{
        width: 70px;
        height: 50px;
        /*border: 1px solid red;*/
        background: url("../../assets/comprehensivePage/sh.png") no-repeat;
        background-position: 0% 0%;
      }
.fd_flag2{
        width: 70px;
        height: 50px;
        background: url("../../assets/comprehensivePage/sh.png") no-repeat;
        background-position: 0% 100%;
      }