CSS Masking - คุณสมบัติมาสก์รูปภาพ

สารบัญ

    แสดงสารบัญ

ด้วยการมาสก์ CSS คุณจะสร้างเลเยอร์มาส์กเพื่อวางบน องค์ประกอบเพื่อซ่อนบางส่วนขององค์ประกอบบางส่วนหรือทั้งหมด

คุณสมบัติมาสก์รูปภาพ CSS

คุณสมบัติ CSS mask-image ระบุมาสก์ ชั้น ภาพ.

รูปภาพเลเยอร์มาสก์อาจเป็นรูปภาพ PNG, รูปภาพ SVG, การไล่ระดับสี CSS หรือ องค์ประกอบ SVG <หน้ากาก>

รองรับเบราว์เซอร์

หมายเหตุ: เบราว์เซอร์ส่วนใหญ่รองรับ CSS เพียงบางส่วนเท่านั้น กำบัง คุณจะต้องใช้คำนำหน้า -webkit- นอกเหนือจากมาตรฐาน คุณสมบัติในเบราว์เซอร์ส่วนใหญ่

ตัวเลขในตารางด้านล่างระบุเบราว์เซอร์เวอร์ชันแรกที่รองรับคุณสมบัตินี้โดยสมบูรณ์ ตัวเลขที่ตามด้วย -webkit- ระบุเวอร์ชันแรกที่ใช้ได้กับคำนำหน้า

Property
mask-image 4.0 -webkit- 79.0 -webkit- 53.0 4.0 -webkit- 15.0 -webkit-

ใช้รูปภาพเป็นเลเยอร์มาสก์

หากต้องการใช้รูปภาพ PNG หรือ SVG เป็นเลเยอร์มาสก์ ให้ใช้ค่า url() เพื่อส่งผ่านมาสก์ ภาพเลเยอร์

รูปภาพมาส์กต้องมีพื้นที่โปร่งใสหรือกึ่งโปร่งใส สีดำ แสดงว่าโปร่งใสเต็มที่

นี่คือภาพหน้ากาก (ภาพ PNG) ที่เราจะใช้:

W3Schools.com

นี่คือภาพจาก Cinque Terre ในอิตาลี:

Cinque Terre

ตอนนี้ เราใช้ภาพหน้ากาก (ภาพ PNG ด้านบน) เป็นเลเยอร์หน้ากากสำหรับภาพจาก Cinque Terre ประเทศอิตาลี:

Cinque Terre

ตัวอย่าง

นี่คือซอร์สโค้ด:

 .mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: 
  url(w3logo.png);
  
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat; 
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;    
}
</style>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>An image with a mask layer image:</h3>
<div class="mask1">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</div>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>

ตัวอย่างอธิบาย

mask-image คุณสมบัติระบุภาพ เพื่อใช้เป็นเลเยอร์มาสก์สำหรับองค์ประกอบ

mask-repeat คุณสมบัติระบุว่าหรืออย่างไร ภาพหน้ากากจะถูกทำซ้ำ ไม่ทำซ้ำ ค่าบ่งชี้ว่าภาพมาส์กจะไม่ถูกทำซ้ำ (ภาพมาส์กจะ ให้แสดงเพียงครั้งเดียวเท่านั้น)

ตัวอย่างอื่น

หากเราละเว้นคุณสมบัติ mask-repeat ภาพหน้ากากจะถูกทำซ้ำทั่วทั้งภาพจากชิงเคว เทเร ประเทศอิตาลี:

Cinque Terre

ตัวอย่าง

นี่คือซอร์สโค้ด:

 .mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: 
  url(w3logo.png);
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
}
</style>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>An image with a mask layer image:</h3>
<div class="mask1">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</div>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>

ใช้การไล่ระดับสีเป็นเลเยอร์มาสก์

การไล่ระดับสีเชิงเส้นและแนวรัศมีของ CSS ยังสามารถใช้เป็นภาพมาส์กได้

ตัวอย่างการไล่ระดับสีเชิงเส้น

ที่นี่เราใช้การไล่ระดับสีเชิงเส้นเป็นเลเยอร์มาสก์สำหรับรูปภาพของเรา การไล่ระดับสีเชิงเส้นนี้เปลี่ยนจากบน (สีดำ) ไปด้านล่าง (โปร่งใส):

Cinque Terre
 

ตัวอย่าง

ใช้การไล่ระดับสีเชิงเส้นเป็นเลเยอร์มาสก์:

   .mask1 {
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient(black, 
    transparent);
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
.mask1 {
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient(black, transparent);
}
</style>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>A linear gradient as a mask layer:</h3>
<div class="mask1">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</div>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>

ที่นี่ เราใช้การไล่ระดับสีเชิงเส้นร่วมกับการมาสก์ข้อความเป็นเลเยอร์มาสก์สำหรับรูปภาพของเรา:

The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.

The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.

The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.

ตัวอย่าง

ใช้การไล่ระดับสีเชิงเส้นพร้อมกับการมาสก์ข้อความเป็นเลเยอร์มาสก์:

   .mask1 {
  max-width: 600px;
  height: 350px;
  
    overflow-y: scroll;
  background: url(img_5terre.jpg) no-repeat;
  
    -webkit-mask-image: linear-gradient(black, transparent);
  
    mask-image: linear-gradient (black, transparent);
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  font-size: 20px;
  padding: 20px;
  color: white;
}
.mask1 {
  max-width: 600px;
  height: 350px;
  overflow-y: scroll;
  background: url(img_5terre.jpg) no-repeat;
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient (black, transparent);
}
</style>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>A linear gradient as a mask layer:</h3>

<div class="mask1">
<p>The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.</p>

<p>The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.</p>

<p>The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.</p>
</div>

</body>
</html>

ตัวอย่างการไล่ระดับสีแบบเรเดียล

ที่นี่ เราใช้การไล่ระดับสีแบบรัศมี (มีรูปร่างเป็นวงกลม) เป็นเลเยอร์มาส์กสำหรับรูปภาพของเรา:

Cinque Terre

ตัวอย่าง

ใช้การไล่ระดับสีแบบรัศมีเป็นเลเยอร์มาส์ก (วงกลม):

   .mask2 {
  -webkit-mask-image: 
    radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
  
    mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
.mask2 {
  -webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
</style>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>A radial gradient as a mask layer (a circle):</h3>
<div class="mask2">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</div>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>

ที่นี่ เราใช้การไล่ระดับสีแบบรัศมี (มีรูปร่างเป็นรูปวงรี) เป็นเลเยอร์มาส์กสำหรับรูปภาพของเรา:

Cinque Terre

ตัวอย่าง

ใช้การไล่ระดับสีแบบรัศมีอื่นเป็นเลเยอร์มาสก์ (วงรี):

   .mask3 {
  -webkit-mask-image: radial-gradient(ellipse, black 50%, rgba(0, 
    0, 0, 0.5) 50%);
  mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 
    0, 0.5) 50%);
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
.mask3 {
  -webkit-mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
</style>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>A radial gradient as a mask layer (an ellipse):</h3>
<div class="mask3">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</div>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>

ใช้ SVG เป็น Mask Layer

องค์ประกอบ SVG <mask> สามารถใช้ภายใน กราฟิก SVG เพื่อสร้างเอฟเฟกต์การมาสก์

ที่นี่ เราใช้องค์ประกอบ SVG <mask> เพื่อสร้างเลเยอร์มาสก์ที่แตกต่างกันสำหรับรูปภาพของเรา:

Sorry, your browser does not support inline SVG.

ตัวอย่าง

เลเยอร์มาส์ก SVG (สร้างเป็นรูปสามเหลี่ยม):

   <svg width="600" height="400">
  <mask id="svgmask1">
    
    <polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
  
    </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" 
    xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>An SVG mask layer (formed as a triangle):</h3>
<svg width="600" height="400">
  <mask id="svgmask1">
    <polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>
Sorry, your browser does not support inline SVG.

ตัวอย่าง

เลเยอร์มาส์ก SVG (ก่อตัวเป็นรูปดาว):

   <svg width="600" height="400">
  <mask id="svgmask2">
    
    <polygon fill="#ffffff" points="100,10 40,198 190,78 10,78 
    160,198"></polygon>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" 
    xlink:href="img_5terre.jpg" mask="url(#svgmask2)"></image>
    </svg>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>An SVG mask layer (formed as a star):</h3>
<svg width="600" height="400">
  <mask id="svgmask2">
    <polygon fill="#ffffff" points="100,10 40,198 190,78 10,78 160,198"></polygon>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask2)"></image>
</svg>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>
Sorry, your browser does not support inline SVG.

ตัวอย่าง

เลเยอร์มาส์ก SVG (สร้างเป็นวงกลม):

   <svg width="600" height="400">
  <mask 
    id="svgmask3">
    <circle fill="#ffffff" cx="75" cy="75" 
    r="75"></circle>
    <circle fill="#ffffff" cx="80" 
    cy="260" r="75"></circle>
    <circle fill="#ffffff" 
    cx="270" cy="160" r="75"></circle>
  </mask>
  <image 
    xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" 
    mask="url(#svgmask3)"></image>
</svg>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>An SVG mask layer (formed as circles):</h3>
<svg width="600" height="400">
  <mask id="svgmask3">
    <circle fill="#ffffff" cx="75" cy="75" r="75"></circle>
    <circle fill="#ffffff" cx="80" cy="260" r="75"></circle>
    <circle fill="#ffffff" cx="270" cy="160" r="75"></circle>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask3)"></image>
</svg>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>

คุณสมบัติการปิดบัง CSS

ตารางต่อไปนี้แสดงรายการคุณสมบัติการมาสก์ CSS ทั้งหมด:

mask-image

ระบุรูปภาพที่จะใช้เป็นเลเยอร์มาสก์สำหรับองค์ประกอบ

mask-mode

ระบุว่ารูปภาพเลเยอร์มาสก์จะถือเป็นมาสก์ความสว่างหรือ เหมือนหน้ากากอัลฟ่า

mask-origin

ระบุตำแหน่งต้นทาง (พื้นที่ตำแหน่งมาส์ก) ของเลเยอร์มาส์ก ภาพ

mask-position

กำหนดตำแหน่งเริ่มต้นของรูปภาพเลเยอร์มาสก์ (สัมพันธ์กับมาสก์ พื้นที่ตำแหน่ง)

mask-repeat

ระบุวิธีการทำซ้ำรูปภาพเลเยอร์มาสก์

mask-size

ระบุขนาดของภาพเลเยอร์มาสก์