資訊專欄INFORMATION COLUMN
摘要：在低版本的里，需染色圖標如果是在有滾動條的區(qū)域內(nèi)，會染色不了。這時需要在滾動區(qū)域加屬性總結(jié)如果有需要染色圖標，做成字體圖標好些。
之前一直以為用background引入的圖標無法染色（非字體圖標），現(xiàn)在才知道有黑科技可以用，就是利用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作為第二層標簽的這種方式，可能會出現(xiàn)最后效果有些雜色。
這是因為after背景繼承了父標簽，然后以它為drop-shadow，這時就出現(xiàn)兩個圖標了。問題就出在父標簽的背景圖（第三個圖標）被疊在下面，圖標如果有比較細的線條，疊在下面的圖標會像糊在下面。
所以最好不要用這種方式，老老實實寫兩層標簽。
2.在低版本的chrome里，需染色圖標如果是在有滾動條的區(qū)域內(nèi)，會染色不了。
這時需要在滾動區(qū)域加屬性：
position: relative;
z-index:1;
總結(jié)
如果有需要染色圖標，做成字體圖標好些。這種drop-shadow的方式，最后再選。?
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/2066.html
摘要：鄰邊投影雙側(cè)投影用兩塊投影每邊各一塊來實現(xiàn)不規(guī)則投影解決辦法是使用濾鏡效果，。濾鏡，它會給圖片增加一種降飽和度的橙黃色染色效果。實現(xiàn)方式毛玻璃效果折角效果折角的解決方案增加一個暗色的三角形來實現(xiàn)翻折效果。 投影 1.單側(cè)投影思路是box-shadow 的第四個長度參數(shù)。它排在模糊半徑參數(shù)之后，稱作擴張半徑。這個參數(shù)會根據(jù)你指定的值去擴大或當指定負值時，縮小投影的尺寸。例如，一個-5px...
摘要：實現(xiàn)染色效果的混合模式是，它會保留上層元素的高亮信息，并從它的下層吸取色相和飽和度信息。當我們只有一個背景圖像及一個透明背景色時，就不會有任何混合效果。 投影 知識點 box-shadow: [inset]? 注意： 在元素正下方的投影被裁切掉了，是沒有的；而text-shadow不同，文字下方的投影不會被裁切。 box-shadow的第三個參數(shù)是模糊半徑，假如設(shè)置4px...
閱讀 940·2021-10-27 14:14
閱讀 1757·2021-10-11 10:59
閱讀 1329·2019-08-30 13:13
閱讀 3167·2019-08-29 15:17
閱讀 2764·2019-08-29 13:48
閱讀 505·2019-08-26 13:36
閱讀 2094·2019-08-26 13:25
閱讀 867·2019-08-26 12:24
