CSS染色圖標（圖片）

XboxYan 發布于2019-04-23 13:35 / 1105人閱讀

摘要：在低版本的里，需染色圖標如果是在有滾動條的區域內，會染色不了。這時需要在滾動區域加屬性總結如果有需要染色圖標，做成字體圖標好些。

之前一直以為用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的方式，最后再選。?

GPU云服務器云服務器 CSS圖標庫 CSS.GG圖標庫圖標設計圖片圖片css

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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