国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

通過css改變svg img的顏色

oogh / 3969人閱讀

摘要：需求如下圖，的時候改變圖標(biāo)顏色，圖標(biāo)為引入的一般的解決辦法有字體圖標(biāo)改變的屬性在事件中切換圖片老一點的方案是切換背景但是為了更小的開銷，一般為更好的解決方案，的顏色是在標(biāo)簽內(nèi)通過屬性寫死的，所以用到了使用了濾鏡中的。

?需求如下圖，hover的時候改變圖標(biāo)顏色，圖標(biāo)為引入的svg img

一般的解決辦法有：1.字體圖標(biāo)改變css的color屬性；2.js在hover事件中切換圖片；3.老一點的方案是hover切換背景？

但是為了更小的開銷，一般css為更好的解決方案，svg的顏色是在標(biāo)簽內(nèi)通過fill屬性寫死的，所以用到了使用了CSS3濾鏡filter中的drop-shadow。

代碼如下：

              

                
{styles.image}>
                  
                

                
{item.line1}

                
{item.line2}

?

section{
      .image{
        display: inline-block;
        overflow: hidden;
      }
      img{
        position: relative;
        left: 0;
        margin-bottom: .1rem;
        filter: drop-shadow(#ffffff 80px 0);　　　　
　　　　 border-left: 30px solid transparent;
　　　　 border-right: 30px solid transparent;
} &:hover{ background-color: gray; img{ left: -80px; } } }

drop-shadow(h-shadow v-shadow blur spread color)：給圖像設(shè)置一個陰影效果。其中?分別設(shè)置陰影的偏移量，且必填。具體可以查看w3c的標(biāo)準(zhǔn)

?主要的實現(xiàn)原理就是設(shè)置需要的陰影效果，并隱藏，hover時切換顯示就好。

但是發(fā)現(xiàn)，在safari瀏覽器中，圖片主體隱藏后，陰影也消失了，查看filter的兼容發(fā)現(xiàn)safari其實是支持這個屬性的，所以給原圖片加上了透明邊框

border-left: 30px solid transparent;//防止drop-shadow主體超出視線隱藏后陰影消失
border-right: 30px solid transparent;

?

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/1356.html

相關(guān)文章

  • 利用CSS改變圖片顏色的100種方法！

    摘要：前言說到對圖片進行處理，我們經(jīng)常會想到這類的圖像處理工具?；蛘呤堑臅r候，對圖片的對比度，陰影進行處理。過濾器通常被用于調(diào)整圖片，背景和邊界的渲染。最后，安利我們的公眾號前端指南。 前言 說到對圖片進行處理，我們經(jīng)常會想到PhotoShop這類的圖像處理工具。作為前端開發(fā)者，我們經(jīng)常會需要處理一些特效，例如根據(jù)不同的狀態(tài)，讓圖標(biāo)顯示不同的顏色?；蛘呤莌over的時候，對圖片的對比度，陰影...

    Keven 評論0 收藏0

  • 利用CSS改變圖片顏色的100種方法！

    摘要：前言說到對圖片進行處理，我們經(jīng)常會想到這類的圖像處理工具?；蛘呤堑臅r候，對圖片的對比度，陰影進行處理。過濾器通常被用于調(diào)整圖片，背景和邊界的渲染。最后，安利我們的公眾號前端指南。 前言 說到對圖片進行處理，我們經(jīng)常會想到PhotoShop這類的圖像處理工具。作為前端開發(fā)者，我們經(jīng)常會需要處理一些特效，例如根據(jù)不同的狀態(tài)，讓圖標(biāo)顯示不同的顏色。或者是hover的時候，對圖片的對比度，陰影...

    pinecone 評論0 收藏0

  • CSS4:icon全解

    摘要：全解法如何在文件里扣出圖層里的圖標(biāo)右鍵選中這個圖層右擊這個圖層把這個圖層放到新文件點擊圖片的按鈕自動切圖到最小再調(diào)整一下畫布大小將圖片設(shè)置為長寬一樣導(dǎo)出即可在頁面里圖片會默認(rèn)保持比例所以只要設(shè)置寬高的其中一種就可以了摳圖的前端現(xiàn)在基本沒有了 CSS4:icon全解 1.img法 1.1如何在psd文件里扣出圖層里的圖標(biāo) 右鍵選中這個圖層showImg(https://segmentf...

    LinkedME2016 評論0 收藏0

  • 你知道SVG Sprites是什么嗎，還在用css sprite就太low了

    摘要：它是基于，由聯(lián)盟進行開發(fā)的。是一種采用來描述二維圖形的語言這個大家都知道，那么元素是什么呢單純翻譯的話，是符號的意思，然我的理解是元素用來定義一個圖形模板對象，它可以用一個元素實例化。 showImg(https://segmentfault.com/img/bVbhAl9?w=1278&h=722); 　　大家好，這里是@IT·平頭哥聯(lián)盟，我是首席填坑官——蘇南(South·Su)，...

    fevin 評論0 收藏0

  • 用css繪制各種形狀

    摘要：同樣的方法可以實現(xiàn)下面這種布局具體代碼如下通過把改成或，就可以立即得到左側(cè)傾斜或右側(cè)傾斜的標(biāo)簽頁。簡單的餅圖的繪制思路是把圓形的左右兩部分指定為上述兩種顏色，然后用偽元素覆蓋上去，通過旋轉(zhuǎn)來決定露出多大的扇區(qū)。 自適應(yīng)的橢圓 1.自適應(yīng)的橢圓 實現(xiàn)方式是通過border-radius這個屬性；border-radius它可以單獨指定水平和垂直半徑。用 / 分隔這兩個值。并且該屬性的值不...

    Lionad-Morotar 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<