Màn che CSS

Sử dụng CSS che phủ, bạn có thể tạo lớp che phủ và đặt nó trên phần tử để che một phần hoặc hoàn toàn một phần của phần tử.

tính chất mask-image

CSS mask-image tính chất xác định hình ảnh che phủ.

Hình ảnh che phủ có thể là hình ảnh PNG, hình ảnh SVG,Dịch chuyển màu sắc CSS hoặc Thành phần <mask> của SVG.

Hỗ trợ trình duyệt

Số liệu trong bảng dưới đây biểu thị phiên bản đầu tiên hỗ trợ tính chất hoàn toàn.

cùng với -webkit- Số liệu của tiền tố biểu thị phiên bản đầu tiên hỗ trợ tiền tố.

Sử dụng hình ảnh làm lớp che phủ

Để sử dụng hình ảnh PNG hoặc SVG làm lớp che phủ, hãy sử dụng url() Truyền giá trị qua hình ảnh che phủ.

Hình ảnh che phủ cần có vùng trong suốt hoặc bán trong suốt. Màu đen biểu thị hoàn toàn trong suốt.

Đây là hình ảnh che phủ mà chúng ta sẽ sử dụng (hình ảnh PNG):

Đây là hình ảnh từ Five Villages của Ý:

Hiện nay, chúng ta sẽ áp dụng hình ảnh che phủ (hình ảnh PNG trên) làm lớp che phủ cho hình ảnh Five Villages của Ý:

Mô hình

Dưới đây là mã nguồn:

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

Thử ngay

ví dụ giải thích

mask-image Thuộc tính xác định hình ảnh được sử dụng làm lớp che khuất của phần tử.

mask-repeat Thuộc tính xác định hình ảnh che khuất có được lặp lại hay cách lặp lại. Giá trị no-repeat biểu thị hình ảnh che khuất sẽ không được lặp lại (hình ảnh che khuất chỉ hiển thị một lần).

ví dụ khác

Nếu chúng ta bỏ qua mask-repeat Thuộc tính, hình ảnh che khuất sẽ được hiển thị lại nhiều lần trên toàn bộ hình ảnh Wuyancun:

Mô hình

Dưới đây là mã nguồn:

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

Thử ngay

sử dụng dải màu làm lớp che khuất

CSS dải màu thẳng và tròn cũng có thể được sử dụng làm hình ảnh che khuất.

ví dụ về dải màu thẳng

Ở đây, chúng ta sử dụng dải màu thẳng làm lớp che khuất của hình ảnh. Dải màu thẳng này từ trên xuống dưới (màu đen đến trong suốt):

Mô hình

sử dụng dải màu thẳng làm lớp che khuất:

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

Thử ngay

Ở đây, chúng ta sử dụng dải màu thẳng và lớp che khuất văn bản làm lớp che khuất của hình ảnh:

Mô hình

sử dụng dải màu thẳng và lớp che khuất văn bản làm lớp che khuất:

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

Thử ngay

ví dụ về dải màu tròn

Ở đây, chúng ta sử dụng dải màu tròn (dạng hình tròn) làm lớp che khuất của hình ảnh:

Mô hình

sử dụng dải màu tròn làm lớp che khuất (đường tròn):

.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%);
}

Thử ngay

Ở đây, chúng ta sử dụng dải mờ trục tâm (hình tròn) làm lớp che cho hình ảnh:

Mô hình

Sử dụng một dải mờ trục tâm khác để làm lớp che (椭圆):

.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%);
}

Thử ngay

Sử dụng SVG làm lớp che

Thẻ <mask> của SVG có thể được sử dụng trong đồ họa SVG để tạo hiệu ứng che:

Ở đây, chúng ta sử dụng thẻ <mask> của SVG để tạo các lớp che khác nhau cho hình ảnh:

Mô hình

Một lớp che SVG hình tam giác:

<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="wuhan.jpg" mask="url(#svgmask1)"></image>
</svg>

Thử ngay

Mô hình

Một lớp che SVG hình sao:

<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="wuhan.jpg" mask="url(#svgmask2)"></image>
</svg>

Thử ngay

Mô hình

Một lớp che SVG hình tròn:

<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="wuhan.jpg" mask="url(#svgmask3)"></image>
</svg>

Thử ngay