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