CSS染色图标（图片）

XboxYan 发布于2019-04-23 13:35 / 1099人阅读

摘要：在低版本的里，需染色图标如果是在有滚动条的区域内，会染色不了。这时需要在滚动区域加属性总结如果有需要染色图标，做成字体图标好些。

之前一直以为用background引入的图标无法染色（非字体图标），现在才知道有黑科技可以用，就是利用drop-shadow。

代码示例

DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
    <style>
        .face1{
          display: inline-block;
          width: 40px;
          height: 40px;
          background-image: url(face.svg);
        }
        .face2{
          display: inline-block;
          width: 40px;
          height: 40px;
          overflow: hidden;
        }
        .face2 i{
          display: inline-block;
          width: 40px;
          height: 40px;
          background-image: url(face.svg);
          transform: translateX(-100%);
          -webkit-filter:drop-shadow(40px 0 #F88E1D);
        }
        .face3{
          display: inline-block;
          width: 40px;
          height: 40px;
          overflow: hidden;
          background-image: url(face.svg);
        }
        .face3:after{
          content: ";
          display: inline-block;
          width: 40px;
          height: 40px;
          transform: translateX(-100%);
          -webkit-filter:drop-shadow(40px 0 #F88E1D);
          background: inherit;
        }
    style>
head>
<body>
    <h3>原始图标：h3>
    <span class="face1">span>
    <h3>染色图标(两层标签)：h3>
    <span class="face2"><i>i>span>
    <h3>染色图标(after)：h3>
    <span class="face3">span>
body>
html>

效果

注意问题

1.使用after作为第二层标签的这种方式，可能会出现最后效果有些杂色。

这是因为after背景继承了父标签，然后以它为drop-shadow，这时就出现两个图标了。问题就出在父标签的背景图（第三个图标）被叠在下面，图标如果有比较细的线条，叠在下面的图标会像糊在下面。

所以最好不要用这种方式，老老实实写两层标签。

2.在低版本的chrome里，需染色图标如果是在有滚动条的区域内，会染色不了。

这时需要在滚动区域加属性：

position: relative;
z-index:1;

总结

如果有需要染色图标，做成字体图标好些。这种drop-shadow的方式，最后再选。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2066.html

css实现的一些视觉效果

摘要：邻边投影双侧投影用两块投影每边各一块来实现不规则投影解决办法是使用滤镜效果，。滤镜，它会给图片增加一种降饱和度的橙黄色染色效果。实现方式毛玻璃效果折角效果折角的解决方案增加一个暗色的三角形来实现翻折效果。投影 1.单侧投影思路是box-shadow 的第四个长度参数。它排在模糊半径参数之后，称作扩张半径。这个参数会根据你指定的值去扩大或当指定负值时，缩小投影的尺寸。例如，一个-5px...

luffyZh 2019-08-29 12:37 评论0 收藏0
css揭秘笔记——视觉效果

摘要：实现染色效果的混合模式是，它会保留上层元素的高亮信息，并从它的下层吸取色相和饱和度信息。当我们只有一个背景图像及一个透明背景色时，就不会有任何混合效果。投影知识点 box-shadow: [inset]? 注意：在元素正下方的投影被裁切掉了，是没有的；而text-shadow不同，文字下方的投影不会被裁切。 box-shadow的第三个参数是模糊半径，假如设置4px...

skinner 2019-08-29 13:48 评论0 收藏0