:nth-child mask-image设置图片颜色

Posted 2022-11-30 zhangyufeng0126

      <div   class="yn-sd-home-nine">

            <div class="yn-sd-home-nine-main" ng-click="gridClick('2')" >
                <div class="yn-logo-xqsb xzq-bg" ></div>
                <div class="yn-name-mz">需求申报</div>
            </div>

            <div class="yn-sd-home-nine-main" ng-click="gridClick('3')" >
                <div class="yn-logo-dldj xzq-bg" ></div>
                <div class="yn-name-mz">电量电价</div>
            </div>
            <div class="yn-sd-home-nine-main" ng-click="gridClick('4')" >
                <div class="yn-logo-fyxx xzq-bg" ></div>
                <div class="yn-name-mz">服务费</div>
            </div>
            <div class="yn-sd-home-nine-main" ng-click="gridClick('9')">
                <div class="yn-logo-dl xzq-bg"></div>
                <div class="yn-name-mz">电量</div>
            </div>
            <div class="yn-sd-home-nine-main" ng-click="gridClick('5')">
                <div class="yn-logo-dydlr xzq-bg"></div>
                <div class="yn-name-mz">电压电流</div>
            </div>
            <div class="yn-sd-home-nine-main" ng-click="gridClick('6')">
                <div class="yn-logo-ydfh xzq-bg"></div>
                <div class="yn-name-mz">用电负荷</div>
            </div>
            <div class="yn-sd-home-nine-main" ng-click="gridClick('7')">
                <div class="yn-logo-glys xzq-bg"></div>
                <div class="yn-name-mz">功率因数</div>
            </div>

            <div class="yn-sd-home-nine-main" ng-click="gridClick('8')" >
                <div class="yn-logo-more" ></div>
                <div class="yn-name-mz">更多</div>
            </div>

        </div>

.yn-sd-home-nine 
    position: relative;
    width: 100vw;
    height: auto;
    padding: calc(40 / 750 * 100vw) 6vw 0 6vw;
    background-color: #FFFFFF;
    font-size: 0;


.yn-sd-home-nine-main 
    width: 22vw;
    height: calc(180 / 750 * 100vw);
    padding: 0 0 calc(40 / 750 * 100vw) 0;
    display: inline-block;
    position: relative;


.yn-name-mz 
    width: 100%;
    height: calc(40 / 750 * 100vw);
    line-height: calc(40 / 750 * 100vw);
    text-align: center;
    font-size: calc(20 / 750 * 100vw);
    color: #52526d;
    overflow: hidden; /*超出部分隐藏*/
    white-space: nowrap; /*不换行*/
    text-overflow: ellipsis; /*超出部分文字以...显示*/


.yn-logo-xqsb 
    width: 100%;
    height: calc(100 / 750 * 100vw);
    -webkit-mask-image: url('../../img/ynhome/apps-icon-xqsb.png');
    mask-image: url('../../img/ynhome/apps-icon-xqsb.png');
    -webkit-mask-position: center;
    -webkit-mask-size: calc(90 / 750 * 100vw) calc(90 / 750 * 100vw);
    -webkit-mask-repeat: no-repeat;


.yn-logo-dldj 
    width: 100%;
    height: calc(100 / 750 * 100vw);
    -webkit-mask-image: url('../../img/ynhome/apps-icon-dldj.png');
    mask-image: url('../../img/ynhome/apps-icon-xqsb.png');
    -webkit-mask-position: center;
    -webkit-mask-size: calc(90 / 750 * 100vw) calc(90 / 750 * 100vw);
    -webkit-mask-repeat: no-repeat;


.yn-logo-pcdj 
    width: 100%;
    height: calc(100 / 750 * 100vw);
    -webkit-mask-image: url('../../img/ynhome/apps-icon-pcdj.png');
    mask-image: url('../../img/ynhome/apps-icon-xqsb.png');
    -webkit-mask-position: center;
    -webkit-mask-size: calc(90 / 750 * 100vw) calc(90 / 750 * 100vw);
    -webkit-mask-repeat: no-repeat;


.yn-logo-dlgz 
    width: 100%;
    height: calc(100 / 750 * 100vw);
    -webkit-mask-image: url('../../img/ynhome/apps-icon-dlgz.png');
    mask-image: url('../../img/ynhome/apps-icon-xqsb.png');
    -webkit-mask-position: center;
    -webkit-mask-size: calc(90 / 750 * 100vw) calc(90 / 750 * 100vw);
    -webkit-mask-repeat: no-repeat;


.yn-logo-fyxx 
    width: 100%;
    height: calc(100 / 750 * 100vw);
    -webkit-mask-image: url('../../img/ynhome/apps-icon-fyxx.png');
    mask-image: url('../../img/ynhome/apps-icon-fyxx.png');
    -webkit-mask-position: center;
    -webkit-mask-size: calc(90 / 750 * 100vw) calc(90 / 750 * 100vw);
    -webkit-mask-repeat: no-repeat;


.yn-logo-dydl 
    width: 100%;
    height: calc(100 / 750 * 100vw);
    -webkit-mask-image: url('../../img/ynhome/apps-icon-dydljc.png');
    mask-image: url('../../img/ynhome/apps-icon-xqsb.png');
    -webkit-mask-position: center;
    -webkit-mask-size: calc(90 / 750 * 100vw) calc(90 / 750 * 100vw);
    -webkit-mask-repeat: no-repeat;


.yn-logo-more 
    background: url('../../img/home/apps-icon.png') no-repeat center;
    background-size: calc(73 / 750 * 100vw) calc(73 / 750 * 100vw);
    width: 100%;
    height: calc(100 / 750 * 100vw);


.yn-logo-ynzb 
    width: 100%;
    height: calc(100 / 750 * 100vw);
    -webkit-mask-image: url('../../img/ynhome/apps-icon-ynzbfx.png');
    mask-image: url('../../img/ynhome/apps-icon-xqsb.png');
    -webkit-mask-position: center;
    -webkit-mask-size: calc(90 / 750 * 100vw) calc(90 / 750 * 100vw);
    -webkit-mask-repeat: no-repeat;


.yn-sd-home-nine .yn-sd-home-nine-main:nth-child(6n+1) .xzq-bg 
    background-color: #6594ed;


.yn-sd-home-nine .yn-sd-home-nine-main:nth-child(6n+2) .xzq-bg 
    background-color: #f48374;


.yn-sd-home-nine .yn-sd-home-nine-main:nth-child(6n+3) .xzq-bg 
    background-color: #65cc9a;


.yn-sd-home-nine .yn-sd-home-nine-main:nth-child(6n+4) .xzq-bg 
    background-color: #F8C558;


.yn-sd-home-nine .yn-sd-home-nine-main:nth-child(6n+5) .xzq-bg 
    background-color: #90D789;


.yn-sd-home-nine .yn-sd-home-nine-main:nth-child(6n+6) .xzq-bg 
    background-color: #DB94E0;

.fa-icon-home 
    background: url("../img/tabbar/HOME-NORMAL.png");
    width: 36px;!important;
    height: 36px;!important;
    margin-top: -6px;
    -webkit-background-size: cover;
    background-size: cover;

.active .fa-icon-home 
    background: #329af0;
    -webkit-mask-image: url("../img/tabbar/HOME-ACTIVE.png");
    mask-image: url("../img/tabbar/HOME-ACTIVE.png");
    -webkit-mask-size:36px;!important,36px;!important;
    -webkit-mask-repeat: no-repeat;
    background-size: cover;
    color: #FFF;