使用 CSS 新增遮罩到圖片-css教學-PHP中文網

首頁

web前端

css教學

使用 CSS 新增遮罩到圖片

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2023 pm 12:01 PM

使用 CSS 添加遮罩到图像

我們可以在元素上放置一個圖層，以便部分或完全隱藏該元素。 mask-image屬性是一種CSS屬性，用於指定元素上的圖層，它也可以是一個圖片，但我們需要使用圖片的位址來新增一個遮罩在該圖片上。

在本文中，我們將看看如何使用CSS屬性為圖像添加遮罩以及我們可以透過相同屬性做更多的事情。

為影像新增蒙版

mask-image屬性是我們將要使用的屬性，用於在所需的圖像或文字上新增蒙版。此屬性新增了一個圖層，可以部分或完全隱藏圖像。為了更好地理解該屬性，讓我們快速查看屬性的語法。

文法

mask-image: none, <image>, initial, inherit;

mask-image 屬性使用不同的值，none 值將不會新增遮罩層，但會在圖片或文字上設定透明的黑色圖層。值可以加入線性漸變的遮罩。初始值會將屬性值設為其預設值，繼承值將繼承使用此屬性的元素的最近父級的遮罩屬性。

為了更好地理解該屬性，我們將透過一個範例來詳細了解mask-image屬性的值是如何運作的。

範例

在這個範例中，我們將使用的值，並新增圖片的位址，以便我們可以在映像上新增遮罩。

在這裡，創建了一個容器類，然後轉到CSS部分，在這部分中，我們首先更改了高度和寬度，然後使用了mask屬性以及我們想要列印的圖像。讓我們看一下從程式碼中得到的輸出。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>An example of using the make-source property</title>
   <style>
      .contain { 
         width: 330px;
         height: 330px;
         background-image: url(
            "https://www.tutorialspoint.com/static/images/simply-easy-learning.jpg"
         );
         background-size: cover;
         background-position: center;
         background-repeat: no-repeat;
         background-position: center;
         -webkit-mask-box-image: url(https://www.tutorialspoint.com/images/logo.png);
      }
      body {
         background-color: white;
      }
   </style>
</head>
<body>
   <div class="contain"></div>
</body>
</html>

這是我們將要得到的輸出，正如您所看到的，使用mask-image屬性後，圖像現在被遮罩了。

現在我們將在另一個範例中使用新的屬性值，因此讓我們轉到下一個範例。

範例

在這個範例中，我們將使用mask-image屬性，並將其值設為線性漸變，現在，讓我們轉到程式碼，了解這個屬性是如何運作的。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Example of using mask-image property</title>
   <style>
      .container {
         height: 130px;
         width: 130px;
         background-image: url(
            "https://www.tutorialspoint.com/coffeescript/images/coffeescript-mini-logo.jpg");
         background-position: center;
         background-size: cover;
         -webkit-mask-image: linear-gradient(
            to top, transparent 19%, black 81%);
            background-repeat: no-repeat;
            mask-image: linear-gradient(
            to top, transparent 19%, black 21%
         );
      }
      body {
         background-color: white;
      }
   </style>
</head>
<body>
   <div class="container"></div>
</body>
</html>

在上面的程式碼中，我們首先建立了一個容器，然後在CSS部分中更改了其高度和寬度。之後，我們新增了要套用遮罩的影像，並使用mask-image屬性將其值設為線性漸層。我們將顏色黑色設定為81％，透明設定為20％。讓我們快速查看上面的程式碼。

在上面的範例中，您可以看到圖像從底部是透明的，這表示遮罩已套用至影像。

注意 - 如果我們將線性漸變中的黑色值設為100%，則我們擁有的影像將對使用者完全可見，如果我們將透明設為100%，則影像將被遮罩完全隱藏。

範例

在下面的範例中，我們將屬性的值變更為徑向漸變，這表示現在將以圓形形式新增遮罩，程式碼的其他元件類似。讓我們看看使用下面的程式碼將獲得的輸出。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Another example for the image-mask property</title>
   <style>
      .mask2 {
         mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
         -webkit-mask-image: radial-gradient(circle, black 49%, rgba(0, 0, 0, 0.5) 50%);
      }
   </style>
</head>
<body>
   <h1 id="This-is-an-example-of-the-mask-image-property">This is an example of the mask-image property</h1>
   <h3 id="We-are-using-the-gradient-value">We are using the gradient value</h3>
   <div class="mask2">
      <img  src="/static/imghwm/default1.png"  data-src="https://www.tutorialspoint.com/images/logo.png"  class="lazy"    style="max-width:90%"  style="max-width:90%" alt="使用 CSS 新增遮罩到圖片" >
   </div>
</body>
</html>

在執行上述程序時，您可以看到遮罩以圓形形式顯示，因為影像的某些部分是透明的，而其他部分是暗的。