Using CSS to give a black icon another color

后端 未结 2 1693
甜味超标
甜味超标 2021-02-13 05:22

I saw some apps where even though a black icon was included, some how the app used CSS to convert the icon into a different colour. I can\'t seem to repeat this process

相关标签:
2条回答
  • 2021-02-13 05:56

    Try use background image for your image, then use another div inside the first one to apply the alpha

        <style type="text/css">
            #image{background-image:url(/img/2012-05-24_1834.png);width:400px;height:400px;}
            #image #image_mask{background-color:red;width:400px;height:400px;opacity:0.4;filter:alpha(opacity=40); /* For IE8 and earlier */}
        </style>
    
    </head>
    
    
    <body>
    
            <div id="image">
                    <div id="image_mask"></div>
           </div>
    </body>
    

    sry for not using your code, i started to work in your awnser before you posted it

    0 讨论(0)
  • 2021-02-13 06:07

    Your code isn't working because the src attribute is being used to show up the black version on top of the orange version. You will be able to get the desired result only with CSS, this way:

    .dashboard-buttons .sessions .img { width: 60px; height: 60px; background-color: #C60; }
    .dashboard-buttons .sessions .img { -webkit-mask-image: url('http://i.stack.imgur.com/gZvK4.png'); }
    

    Here is the changed HTML snippet:

    <div class="dashboard-buttons">
       <a href="sessions.php" class="sessions">
           <div class="img"></div>
           <span>Sessions</span>
       </a>
    </div>​
    

    And here is a working sample of it.

    0 讨论(0)
提交回复
热议问题