CSS mask-image屬性用法及代碼示例

CSS中的mask-image屬性用於設置圖像或文本的遮罩。它用於為CSS中的特定元素形成遮罩層。

用法:

mask-image:none | <mask-source>

屬性值：

none:沒有設置maks層，而是設置了透明的黑色層。

用法：

mask-image:none

Example:

在此示例中，未創建任何掩碼。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="UTF-8" /> 
        <meta name="viewport" 
              content="width=device-width, 
                       initial-scale=1.0" /> 
        <title>Document</title> 
    </head> 
    <style> 
        .container{ 
          background-color:green; 
          background-repeat:no-repeat; 
          width:400px; 
          height:400px; 
          display:flex; 
          align-items:center; 
          justify-content:center; 
        } 
        .mask{ 
          background:black; 
          width:200px; 
          height:200px; 
          -webkit-mask-image:none; 
        } 
        .mask h1{ 
          height:400px; 
          width:400px; 
        } 
        wrap text h1 
    </style> 
    <body> 
        <div class="container"> 
            <div class="mask"></div> 
        </div> 
    </body> 
</html>

Output:

<mask-source>：用於提供圖片網址的來源。

用法:

mask-image:url();

例：

該圖標是黑色背景顏色的遮罩。可以根據需要進行更改。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="UTF-8" /> 
        <meta name="viewport" 
              content="width=device-width,  
                       initial-scale=1.0" /> 
        <title>Document</title> 
    </head> 
    <style> 
        .container{ 
          background-color:green; 
          background-repeat:no-repeat; 
          width:400px; 
          height:400px; 
          display:flex; 
          align-items:center; 
          justify-content:center; 
        } 
        .mask{ 
          background:black; 
          width:200px; 
          height:200px; 
          -webkit-mask-image:url( 
"https://image.flaticon.com/icons/svg/942/942195.svg"); 
        } 
        .mask h1{ 
          height:400px; 
          width:400px; 
        } 
        wrap text h1 
    </style> 
    <body> 
        <div class="container"> 
            <div class="mask"></div> 
        </div> 
    </body> 
</html>

輸出：

支持的瀏覽器：

Chrome
Edge
Firefox
Opera
Safari

相關用法

注：本文由純淨天空篩選整理自tarun007大神的英文原創作品 CSS mask-image Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。