css直接改变图标颜色

最新推荐文章于 2025-06-04 19:10:40 发布

空袭的梦

最新推荐文章于 2025-06-04 19:10:40 发布

阅读量6.7k

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_36031730/article/details/84547948

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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);
}