css遮罩 mask屬性

来源:https://www.cnblogs.com/zhinian-/archive/2020/03/26/12572844.html

先上一張咱們的原始圖 rs7.jpg 如下: 一、mask-image屬性 1.基本的png圖遮罩展示 我們使用的遮罩圖片 ad.png,如下: html: <img src="rs7.jpg" alt="" class="mask-img"> css: .mask-img { width: 300 ...


 

先上一張咱們的原始圖 rs7.jpg 如下:

 

 

一、mask-image屬性

  1.基本的png圖遮罩展示

  我們使用的遮罩圖片 ad.png,如下:

  

 

   html:

  

<img src="rs7.jpg" alt="" class="mask-img">

  css:

  

        .mask-img {
            width: 300px;
            height: auto;
            -webkit-mask-image: url(ad.png);
            mask-image: url(ad.png);
        }

  效果:

  

 

 

 

  2.svg圖遮罩展示

  ad.svg:

  

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg t="1585189183266" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3921"
     width="64" height="64">
    <path d="M371.786073 447.619714c24.230867-32.225959 21.344121-76.838016-0.069585-103.877859C349.442182 371.876636 348.25617 417.232636 371.786073 447.619714z"
          p-id="3922"></path>
    <path d="M513.893628 447.468265c23.820522-30.03813 22.170952-76.762291-0.013303-103.544261C491.880265 371.777375 490.349399 416.620699 513.893628 447.468265z"
          p-id="3923"></path>
    <path d="M679.218978 672.898527c-7.786337-6.589069-17.012466-8.511861-26.863834-8.515954-11.9471-0.016373-20.928658 3.006474-28.070312 9.447163-10.051937 9.069563-10.083659 22.556739-0.067538 31.67235 13.382798 12.187577 41.808198 12.545734 55.42431 0.695848C690.636005 696.627974 690.435437 682.391738 679.218978 672.898527z"
          p-id="3924"></path>
    <path d="M352.557126 324.45458c-32.680307-24.735357-83.691097-24.074302-116.461455 10.790764-31.685653 33.712823-31.741935 87.071078-0.26606 120.467699 33.045627 35.060517 83.83436 35.831067 116.744911 11.002588-15.886829-20.968567-24.39255-44.474934-24.440645-70.971401C328.085782 369.121895 336.547501 345.501942 352.557126 324.45458z"
          p-id="3925"></path>
    <path d="M337.815377 670.621671c-4.332678 7.17133-8.744151 14.300704-13.301957 21.747303l52.274574 0c-8.820899-14.450107-17.552771-28.756951-26.275433-43.044352C346.267886 656.450926 342.082564 663.561881 337.815377 670.621671z"
          p-id="3926"></path>
    <path d="M390.920876 324.554864c16.065907 20.917402 24.443715 44.533262 24.447808 70.983681 0 26.5374-8.508791 50.220798-24.535813 71.221088 32.298614 24.38027 77.241198 21.134343 103.935164-0.181125-16.102746-20.875446-24.454972-44.602847-24.492834-70.951959-0.034792-26.438139 8.367575-50.237171 24.555256-71.124897C464.31342 301.040311 418.989141 302.254975 390.920876 324.554864z"
          p-id="3927"></path>
    <path d="M511.999488 56.482409c-246.99951 0-447.230857 200.231347-447.230857 447.230857 0 246.998487 200.23237 447.231881 447.230857 447.231881 246.99951 0 447.229834-200.233394 447.229834-447.231881C959.229323 256.713756 758.998999 56.482409 511.999488 56.482409zM447.461613 739.334635c-12.632715 0.016373-25.266453-0.077771-37.895075 0.077771-2.828418 0.033769-4.5312-0.701988-5.957689-3.243881-3.090385-5.496178-6.452969-10.851139-9.91379-16.121166-0.685615-1.041726-2.320858-2.060939-3.52222-2.065032-26.319435-0.121773-52.635801-0.121773-78.954213-0.014326-1.061169 0.00614-2.508123 1.011027-3.114944 1.964748-3.586688 5.659907-6.89606 11.499915-10.515494 17.140379-0.691755 1.073448-2.342348 2.156106-3.562129 2.172479-13.678534 0.153496-27.362184 0.098237-42.031279 0.098237 13.129019-19.704784 25.783223-38.705534 38.446637-57.70526 12.616342-18.927071 25.241894-37.85005 38.036291-57.037041-4.217045-5.060249-8.449439-10.138918-13.054317-15.661701 1.693572-0.1361 2.705622-0.287549 3.715625-0.287549 13.950733-0.014326 27.900443-0.088004 41.848107 0.094144 1.64036 0.020466 3.928472 1.011027 4.796236 2.300392 28.198226 42.053792 56.257282 84.198657 84.33271 126.334313 0.278339 0.419556 0.488117 0.881067 0.957815 1.74269C449.663768 739.212862 448.564737 739.334635 447.461613 739.334635zM570.708612 698.874131c-0.206708 16.548908-10.331299 30.185486-27.728528 35.639708-23.019273 7.213285-46.404889 7.213285-69.261457-0.849344-17.520025-6.181793-25.89374-19.077497-25.915229-37.606503-0.022513-17.960047-0.00614-35.922141-0.00614-54.350862l39.006386 0 0 4.27742c0 14.406105-0.047072 28.810163 0.034792 43.216267 0.019443 3.289929 0.214894 6.625908 0.785899 9.859555 1.270946 7.227612 5.247514 12.245905 12.55699 14.282285 6.683213 1.864464 13.341866 1.826602 19.857257-0.547469 8.032954-2.931772 11.786441-8.989745 11.83249-17.388019 0.094144-16.389272 0.104377-32.775474 0.147356-49.160653 0.007163-1.417279 0-2.832512 0-4.472871l38.443567 0c0.112564 0.607844 0.278339 1.099031 0.278339 1.597381C570.758754 661.871379 570.937832 680.376848 570.708612 698.874131zM701.408349 728.280882c-11.920494 6.821359-25.112957 9.53926-38.637995 10.578939-19.039635 1.461281-37.761022-0.119727-55.323003-8.234545-14.998599-6.930853-25.101701-18.329461-27.503401-35.05847-2.745531-19.113313 5.100158-33.743522 21.51399-43.240827 18.785855-10.868535 39.013549-14.162558 60.380182-8.977465-10.037611-11.190877-20.199041-22.51683-30.868031-34.406624 1.821485-0.132006 2.902096-0.281409 3.982708-0.283456 12.453636-0.016373 24.904203-0.064468 37.354769 0.056282 1.482771 0.01228 3.533476 0.49528 4.348028 1.524726 12.418844 15.689331 24.937972 31.315216 36.865629 47.376007 6.711865 9.03784 11.379165 19.205411 11.242042 30.92329C724.553489 706.240913 716.688357 719.540823 701.408349 728.280882zM775.324826 739.820706l-40.187281 0 0-97.438193 40.187281 0L775.324826 739.820706zM809.949414 475.349265c-38.797631 40.707121-104.565521 48.337915-153.337317 10.866489-47.541783 32.420387-94.941326 32.593326-142.645814 0.246617-47.231721 32.301683-94.750991 32.336476-142.517901-0.193405-51.073212 39.526225-120.16173 28.075429-157.200298-14.989389-37.95545-44.129056-37.915541-107.836007-0.300852-151.151535 38.124296-43.903929 107.142206-54.228065 157.473521-15.196097 47.672766-32.455179 95.059006-32.489972 142.564973-0.209778 47.284933-32.277124 94.681406-32.204469 142.662187 0.212848 26.964118-20.311605 57.68377-28.269857 91.582835-22.190395 28.40391 5.094018 51.701522 19.293415 69.462025 42.00058C853.22708 370.179994 850.052784 433.270914 809.949414 475.349265z"
          p-id="3928"></path>
    <path d="M675.403069 324.46379c15.933901 20.956288 24.393573 44.460608 24.418133 70.962192 0.027629 26.634614-8.511861 50.246381-24.452925 71.330582 33.870412 25.270547 84.612073 23.570835 117.009947-11.360745 31.328519-33.780361 30.968315-86.965677-0.51984-120.203686C758.682797 300.17664 707.650517 299.93821 675.403069 324.46379z"
          p-id="3929"></path>
    <path d="M533.160437 324.576353c16.160051 20.825304 24.518417 44.542472 24.518417 70.886467 0.004093 26.357298-8.311293 50.092885-24.575722 71.202669 29.825282 23.00597 74.615395 22.759353 103.589286 0.321318-32.42448-47.665603-32.567743-95.163383 0-142.81773C606.607216 301.023938 561.34229 302.268278 533.160437 324.576353z"
          p-id="3930"></path>
    <path d="M656.180262 447.433472c23.511483-29.342282 22.411429-76.301803-0.101307-103.706967C632.635009 374.572024 634.100384 419.089937 656.180262 447.433472z"
          p-id="3931"></path>
</svg>

  css:

  

        .mask-img {
            width: 300px;
            height: auto;
            -webkit-mask-image: url(ad.svg);
            mask-image: url(ad.svg);
        }

 

  效果:

  

 

 

  3.使用svg圖形中的<mask>元素作為遮罩元素:

  現在我們來一個基本的圓形,如下:

  svg:

  

<svg>
    <defs>
        <mask id="mask" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
            <circle cx=".500" cy=".50" r=".30" fill="red"></circle>
        </mask>
    </defs>
    <rect x="0" y="0" width="100" height="100" style="mask:url(#mask)"></rect>
</svg>

  svg圓形效果:

  

 

   在上圖中,mask元素中添加了一個圓,用作蒙版形狀

  css:

  

        .mask-img {
            width: 300px;
            height: auto;
            /*-webkit-mask-image: url(ad.svg);*/
            /*mask-image: url(ad.svg);*/
            -webkit-mask-image: url(#mask);
            mask-image: url(#mask);
        }

 

  html:

  

<img src="rs7.jpg" alt="" class="mask-img">
<svg>

    <defs>
        <mask id="mask" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
            <circle cx=".500" cy=".50" r=".30" fill="#fff"></circle>
        </mask>
    </defs>

</svg>

 

  效果如下(火狐瀏覽器)

  

 

   左側為填充白色的 fill=“#fff”,右側為填充紅色的,如果填充黑色 就完全透明瞭!

  中間的svg占用了位置,如果不希望這樣的話  給svg增加個width:0;的屬性,display:none;會使咱們的遮罩失效!

  

 

  上述說的是普通HTML元素內聯的 svg mask ,相容不太好 目前只有火狐瀏覽器支持;

 

 

  下麵我們說說svg元素內聯的mask;

  html:

  

<svg width="300">
    <image xlink:href="rs7.jpg" width="300" mask="url(#mask)"></image>
</svg>
<svg>

    <defs>
        <mask id="mask" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
            <circle cx=".500" cy=".50" r=".30" fill="green"></circle>
        </mask>
    </defs>

</svg>

  效果:

  

 

  這樣谷歌瀏覽器也可以顯示了,如上圖。

 

  

 

 三、其他幾個屬性

mask-mode 屬性 只有火狐有效果。

 

 

mask-repeat屬性的預設值是repeat,行為類似於background-repeat屬性。

 

mask-positionbackground-position支持的屬性值和表現基本上都是一模一樣的。

 

mask-clip屬性性質上和background-clip類似

 

mask-origin屬性性質上和background-origin類似

 

mask-size屬性性質上和background-size類似


mask-type屬性有兩種模式 luminance、alpha

 

mask-composite表示當同時使用多個圖片進行遮罩時候的混合方式

 

 

本文參考:CSS遮罩CSS3 mask/masks詳細介紹

來幾個css svg canvas 遮罩實例:https://speckyboy.com/css-svg-canvas-masks/

 

  

  

 


您的分享是我們最大的動力!

更多相關文章
  • Web前端開發-職業技能等級標準1.pdf 更多盡在http://yueguang.online ...
  • 使用標簽定義 HTML 頁面中的圖像,標簽有兩個必需的屬性:源屬性src和alt,是空標簽,意思是說,它只包含屬性,並且沒有閉合標簽。要在頁面上顯示圖像,你需要使用源屬性(src)。src指 "source",是圖像的 URL 地址 ...
  • CSS(Cascading Style Sheet)可譯為“層疊樣式表”或“級聯樣式表”,它定義如何顯示 HTML 元素,用於控制Web頁面的外觀。通過使用CSS實現頁面的內容與表現形式分離,極大提高了工作效率 。目前的模式是html+css+javascript,如何理解呢,就是html是網頁的結... ...
  • HTML頭部head元素包含關於文檔的概要信息,也被稱為元信息(meta-information),head定義了文檔的信息,title定義了文檔的標題,base定義了頁面鏈接標簽的預設鏈接地址,link定義了一個文檔和外部資源之間的關係,meta定義了HTML文檔中的元數據,script定義了客戶... ...
  • 1、打開setting——plugins 2、下載一個webstorm插件 Sexy Editor 如下圖: 3、下載完成之後重啟 4、重啟之後打開setting 找到 SexyEditor 選項 並點擊右側底部的 Add images 按鈕 5、 選擇自己喜歡的圖片 6、可以調整透明度 尺寸等 7 ...
  • 前端作為互聯網時代直接觸達用戶的視窗,大到我們每天瀏覽到的網站,小到一次點擊按鈕的頁面,前端無處不在。並且在產品的眾多開發環節之中,最能讓用戶直觀感受到的就是前端開發。因而前端行業的廣闊發展前景也吸引了不少人的轉業學習。那麼,零基礎如何學好前端呢?有什麼建議嗎?本文將為初學者詳細解答一下這兩個問題, ...
  • 正常我們寫一個左右兩列,左側一列放置圖片的html,如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .container{ background-col ...
  • 在vue項目中,為了減少首屏載入的時間,通常會開啟路由的懶載入。路由懶載入配合gizp確實能幫助我們大大的加快首屏的載入時間。 然而,路由懶載入會使得我們在第一次打開一個新頁面的時候,會有一個載入時間。如果在這個時候我們沒有一個提示的話,給人的感覺會是好像我點了頁面跳轉但是沒反應。所以,這個時候我們 ...
一周排行
  • 《ASP.NET MVC 企業級實戰》 [作者] (中) 鄒瓊俊[出版] 清華大學出版社[版次] 2017年04月 第1版[印次] 2019年08月 第6次 印刷[定價] 89.00元 【第01章】 (P021) 只有在 Lambda 有一個輸入參數時,括弧才是可選的,否則括弧是必需的。 使用空括弧 ...
  • 上一篇(https://www.cnblogs.com/meowv/p/12971041.html)使用HtmlAgilityPack抓取壁紙數據成功將圖片存入資料庫,本篇繼續來完成一個全網各大平臺的熱點新聞數據的抓取。 同樣的,可以先預覽一下我個人博客中的成品:https://meowv.com/ ...
  • 前言 請了一天假後回公司,同事跟我說使用Newtonsoft.json序列化TreeView對象的時候出現報錯; 啊!什麼?這個類庫不是能夠序列化所有東西嗎?真的很懵逼,也是我第一次使用這個類庫出現問題! 問題異常 異常信息 : Newtonsoft.Json.JsonSerializationEx ...
  • 簡單瞭解下麵詞語的意思 節點:二叉樹中每個元素都稱為節點 葉子節點(簡稱:葉子):度為0的節點,葉子節點就是樹中最底段的節點,葉子節點沒有子節點,也叫終端結點 分枝節點:度不為0的結點 節點的度:二叉樹的度代表某個節點的孩子或者說直接後繼的個數,簡單說就是一個節點擁有的子樹數 樹的度: 樹中最大的結 ...
  • C# 中的LINQ 提供了兩種操作方式,查詢表達式和查詢操作符,所有的查詢表達式都有對應的查操作符類替代,查詢表達式有點“類” SQL,在代碼中寫SQL,總覺得不夠“優雅”,使用查詢操作符就顯得“優雅”很多, 本系列就來對所有的LINQ 標準操作符進行一個全面的總結,這些操作符和我上篇文章總結的Rx ...
  • 在Startup ConfigureServices 註冊本地化所需要的服務AddLocalization和 Configure<RequestLocalizationOptions> public void ConfigureServices(IServiceCollection services ...
  • 為什麼需要持久化,以及Redis持久化的RDB方式在這篇文章講的已經很透徹了,足以弔打面試官了。而且此篇內容需要RDB文章的內容支持,所以建議先看下:看完這篇還不懂Redis的RDB持久化,你們來打我! 一、什麼是AOF 它也是Redis持久化的重要手段之一,aof->Append Only Fil ...
  • 先上圖: @IT程式猿 微博網友評論: @迢書:前同事的,親眼見過 @AvenGeeker:Bug 404 @科技州:這是要逼死強迫症 @小島一瞥:哈哈哈哈哈我老家的車 最後小編整理了一套技術資料不僅能精準消除技術盲點、累計面試經驗,更可以攻剋JVM、Spring、分散式、微服務等技術難題。 海量電 ...
  • 概括來說,分三步: 1,首先找到是哪個進程的CPU占有率飆到了100%。 2,根據進程號pid,定位到是哪個線程,找到對應線程的tid。 3,導出對應線程的dump日誌文件,分析日誌文件定位具體代碼。 要解決這個問題,你應該具備以下技能: 1,linux的top命令。 2,jvm監控工具jps。 3 ...
  • 寫在最後 程式員為何害怕【別人的代碼】呢?這讓我想起一個段子。 寫這段代碼時 只有上帝和我知道他是幹嘛的 現在 只有上帝知道了 別人的代碼,似乎總意味著冗長、晦澀、凌亂,給人一種不想靠近的感覺。搞笑的是,對於一些程式員而言,即使是自己的代碼,在一段時間之後自己再拿來看,也成了【別人的代碼】... 作 ...