css遮罩 mask屬性

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

先上一張咱們的原始圖 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/

 

  

  

 


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

-Advertisement-
Play Games
更多相關文章
  • 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確實能幫助我們大大的加快首屏的載入時間。 然而,路由懶載入會使得我們在第一次打開一個新頁面的時候,會有一個載入時間。如果在這個時候我們沒有一個提示的話,給人的感覺會是好像我點了頁面跳轉但是沒反應。所以,這個時候我們 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...