css直接改变图标颜色

最新推荐文章于 2025-09-10 02:12:55 发布

原创最新推荐文章于 2025-09-10 02:12:55 发布 · 6.7k 阅读

1 ·

CC 4.0 BY-SA版权

本文探讨了如何使用CSS的伪元素和属性如display, position, border及filter来实现图标替换与投影效果，展示了如何通过调整元素的相对位置和应用阴影效果来改变图标外观。

<div class="main_menu">
    <ul id="menu_ul">
        <li ><a data-link="military_bills.html"  class="active"><div class="icon-wrapper"><p class="dd"></p></div><span class="nav_ti">111</span></a></li>
    </ul>
</div>

.icon-wrapper {//通过盒子隐藏原图标
   display: inline-block;
   width: 30px;
   height: 30px;
   overflow: hidden;
   position: relative;
   margin-top: 5px;
}
.dd{
   background: url(../images/bi.png) no-repeat center;
   width: 100%;
   height: 100%;
}
.active .dd{//改变的图标显示以及投影颜色
   position: absolute;
   left: -30px;
   display: inline-block;
   border-right: 30px solid transparent;
   -webkit-filter: drop-shadow(#fff 30px 0);
   filter: drop-shadow(#fff 30px 0);
}