Đảo ngược mặt nạ CSS

Đáng ngạc nhiên là điều đó là có thể, mặc dù tôi chỉ khuyên điều đó nếu trang web của bạn chỉ tập trung vào tác động trực quan và ngữ nghĩa của mã không quan trọng, ngoài ra, nó có thể sẽ không nhất quán trên các trình duyệt cũ hơn

Kết quả là

Đây không phải là một giải pháp hay và tôi cá là nó không phải là giải pháp duy nhất ngoài đó, nhưng nó làm được những gì bạn muốn

Nó yêu cầu bạn có hai phiên bản của văn bản và sử dụng định vị tuyệt đối và một số phép toán đơn giản, bạn có thể tạo hiệu ứng này

Vì vậy, nếu chúng ta có một vùng chứa

<svg width="0" height="0" viewBox="0 0 400 300">
  <defs>
    <mask id="mask">
      <rect fill="#000000" x="0" y="0" width="400" height="300">rect>
      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
    mask>
  defs>
svg>

<div class="container">
    <img src="balloons.jpg" alt="Balloons">
div>

6, và bên trong đó có thêm hai

<svg width="0" height="0" viewBox="0 0 400 300">
  <defs>
    <mask id="mask">
      <rect fill="#000000" x="0" y="0" width="400" height="300">rect>
      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
    mask>
  defs>
svg>

<div class="container">
    <img src="balloons.jpg" alt="Balloons">
div>

7, và trong mỗi vùng chứa đó là một thể hiện của văn bản, bạn có thể sử dụng cấu trúc

<svg width="0" height="0" viewBox="0 0 400 300">
  <defs>
    <mask id="mask">
      <rect fill="#000000" x="0" y="0" width="400" height="300">rect>
      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
    mask>
  defs>
svg>

<div class="container">
    <img src="balloons.jpg" alt="Balloons">
div>

8 và thuộc tính

<svg width="0" height="0" viewBox="0 0 400 300">
  <defs>
    <mask id="mask">
      <rect fill="#000000" x="0" y="0" width="400" height="300">rect>
      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
    mask>
  defs>
svg>

<div class="container">
    <img src="balloons.jpg" alt="Balloons">
div>

9 sau đây để đạt được điều này

Mặt nạ CSS cung cấp cho bạn tùy chọn sử dụng hình ảnh làm lớp mặt nạ. Điều này có nghĩa là bạn có thể sử dụng hình ảnh, SVG hoặc độ dốc làm mặt nạ của mình để tạo các hiệu ứng thú vị mà không cần trình chỉnh sửa hình ảnh

Ngày 14 tháng 9 năm 2020

Có sẵn trong. Tiếng Anh, Español, Português, Русский, 中文, 日本語, và 한국어

Rachel Andrew

Trang chủ trục trặc Twitter GitHub

Trên trang này

Khi bạn cắt một phần tử bằng thuộc tính

<svg width="0" height="0" viewBox="0 0 400 300">
  <defs>
    <mask id="mask">
      <rect fill="#000000" x="0" y="0" width="400" height="300">rect>
      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
    mask>
  defs>
svg>

<div class="container">
    <img src="balloons.jpg" alt="Balloons">
div>

0, khu vực được cắt sẽ trở nên vô hình. Thay vào đó, nếu bạn muốn làm mờ một phần của hình ảnh hoặc áp dụng một số hiệu ứng khác cho nó, thì bạn cần sử dụng mặt nạ. Bài đăng này giải thích cách sử dụng thuộc tính

<svg width="0" height="0" viewBox="0 0 400 300">
  <defs>
    <mask id="mask">
      <rect fill="#000000" x="0" y="0" width="400" height="300">rect>
      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
    mask>
  defs>
svg>

<div class="container">
    <img src="balloons.jpg" alt="Balloons">
div>

1 trong CSS, cho phép bạn chỉ định một hình ảnh để sử dụng làm lớp mặt nạ. Điều này cung cấp cho bạn ba tùy chọn. Bạn có thể sử dụng tệp hình ảnh làm mặt nạ, SVG hoặc dải màu

Tính tương thích của trình duyệt web

Hầu hết các trình duyệt chỉ hỗ trợ một phần cho thuộc tính mặt nạ CSS tiêu chuẩn. Bạn sẽ cần sử dụng tiền tố

<svg width="0" height="0" viewBox="0 0 400 300">
  <defs>
    <mask id="mask">
      <rect fill="#000000" x="0" y="0" width="400" height="300">rect>
      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
    mask>
  defs>
svg>

<div class="container">
    <img src="balloons.jpg" alt="Balloons">
div>

2 ngoài thuộc tính tiêu chuẩn để đạt được khả năng tương thích trình duyệt tốt nhất. Xem thông tin hỗ trợ trình duyệt đầy đủ

Hỗ trợ trình duyệt. chrome 1, Được hỗ trợ 1 firefox 53, Được hỗ trợ 53 edge 79, Supported 79 safari 15.4, Supported 15. 4

Mặc dù hỗ trợ trình duyệt bằng cách sử dụng thuộc tính tiền tố là tốt, nhưng khi sử dụng mặt nạ để hiển thị văn bản ở trên cùng của hình ảnh, hãy quan tâm đến điều gì sẽ xảy ra nếu mặt nạ không khả dụng. Có thể đáng để sử dụng các truy vấn tính năng để phát hiện hỗ trợ cho

<svg width="0" height="0" viewBox="0 0 400 300">
  <defs>
    <mask id="mask">
      <rect fill="#000000" x="0" y="0" width="400" height="300">rect>
      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
    mask>
  defs>
svg>

<div class="container">
    <img src="balloons.jpg" alt="Balloons">
div>

1 hoặc

<svg width="0" height="0" viewBox="0 0 400 300">
  <defs>
    <mask id="mask">
      <rect fill="#000000" x="0" y="0" width="400" height="300">rect>
      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
    mask>
  defs>
svg>

<div class="container">
    <img src="balloons.jpg" alt="Balloons">
div>

4 và cung cấp dự phòng có thể đọc được trước khi thêm phiên bản mặt nạ của bạn

@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
  /* code that requires mask-image here. */
}

Mặt nạ với một hình ảnh

Thuộc tính

<svg width="0" height="0" viewBox="0 0 400 300">
  <defs>
    <mask id="mask">
      <rect fill="#000000" x="0" y="0" width="400" height="300">rect>
      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
    mask>
  defs>
svg>

<div class="container">
    <img src="balloons.jpg" alt="Balloons">
div>

1 hoạt động theo cách tương tự như thuộc tính

<svg width="0" height="0" viewBox="0 0 400 300">
  <defs>
    <mask id="mask">
      <rect fill="#000000" x="0" y="0" width="400" height="300">rect>
      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
    mask>
  defs>
svg>

<div class="container">
    <img src="balloons.jpg" alt="Balloons">
div>

1. Sử dụng giá trị

<svg width="0" height="0" viewBox="0 0 400 300">
  <defs>
    <mask id="mask">
      <rect fill="#000000" x="0" y="0" width="400" height="300">rect>
      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
    mask>
  defs>
svg>

<div class="container">
    <img src="balloons.jpg" alt="Balloons">
div>

2 để chuyển vào một hình ảnh. Hình ảnh mặt nạ của bạn cần phải có vùng trong suốt hoặc bán trong suốt

Một khu vực hoàn toàn trong suốt sẽ làm cho phần hình ảnh bên dưới khu vực đó không nhìn thấy được. Tuy nhiên, sử dụng một khu vực bán trong suốt sẽ cho phép một số hình ảnh gốc hiển thị xuyên qua. Bạn có thể thấy sự khác biệt trong Glitch bên dưới. Hình ảnh đầu tiên là hình ảnh gốc của bóng bay không có mặt nạ. Hình ảnh thứ hai được áp dụng mặt nạ có ngôi sao màu trắng trên nền hoàn toàn trong suốt. Hình ảnh thứ ba có một ngôi sao màu trắng trên nền có độ trong suốt chuyển màu

Trong ví dụ này, tôi cũng đang sử dụng thuộc tính

<svg width="0" height="0" viewBox="0 0 400 300">
  <defs>
    <mask id="mask">
      <rect fill="#000000" x="0" y="0" width="400" height="300">rect>
      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
    mask>
  defs>
svg>

<div class="container">
    <img src="balloons.jpg" alt="Balloons">
div>

3 với giá trị là

<svg width="0" height="0" viewBox="0 0 400 300">
  <defs>
    <mask id="mask">
      <rect fill="#000000" x="0" y="0" width="400" height="300">rect>
      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
    mask>
  defs>
svg>

<div class="container">
    <img src="balloons.jpg" alt="Balloons">
div>

4. Thuộc tính này hoạt động giống như

<svg width="0" height="0" viewBox="0 0 400 300">
  <defs>
    <mask id="mask">
      <rect fill="#000000" x="0" y="0" width="400" height="300">rect>
      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
    mask>
  defs>
svg>

<div class="container">
    <img src="balloons.jpg" alt="Balloons">
div>

5. Bạn có thể sử dụng các từ khóa

<svg width="0" height="0" viewBox="0 0 400 300">
  <defs>
    <mask id="mask">
      <rect fill="#000000" x="0" y="0" width="400" height="300">rect>
      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
    mask>
  defs>
svg>

<div class="container">
    <img src="balloons.jpg" alt="Balloons">
div>

4 và

<svg width="0" height="0" viewBox="0 0 400 300">
  <defs>
    <mask id="mask">
      <rect fill="#000000" x="0" y="0" width="400" height="300">rect>
      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
    mask>
  defs>
svg>

<div class="container">
    <img src="balloons.jpg" alt="Balloons">
div>

7 hoặc bạn có thể đặt kích thước cho nền bằng cách sử dụng bất kỳ đơn vị độ dài hợp lệ nào hoặc tỷ lệ phần trăm

Bạn cũng có thể lặp lại mặt nạ của mình giống như bạn có thể lặp lại hình nền, để sử dụng một hình ảnh nhỏ làm mẫu lặp lại

Tạo mặt nạ với SVG

Thay vì sử dụng tệp hình ảnh làm mặt nạ, bạn có thể sử dụng SVG. Có một số cách để đạt được điều này. Đầu tiên là có một phần tử

<svg width="0" height="0" viewBox="0 0 400 300">
  <defs>
    <mask id="mask">
      <rect fill="#000000" x="0" y="0" width="400" height="300">rect>
      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
    mask>
  defs>
svg>

<div class="container">
    <img src="balloons.jpg" alt="Balloons">
div>

8 bên trong SVG và tham chiếu ID của phần tử đó trong thuộc tính

<svg width="0" height="0" viewBox="0 0 400 300">
  <defs>
    <mask id="mask">
      <rect fill="#000000" x="0" y="0" width="400" height="300">rect>
      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
    mask>
  defs>
svg>

<div class="container">
    <img src="balloons.jpg" alt="Balloons">
div>

1

<svg width="0" height="0" viewBox="0 0 400 300">
  <defs>
    <mask id="mask">
      <rect fill="#000000" x="0" y="0" width="400" height="300">rect>
      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
    mask>
  defs>
svg>

<div class="container">
    <img src="balloons.jpg" alt="Balloons">
div>

<svg width="0" height="0" viewBox="0 0 400 300">
  <defs>
    <mask id="mask">
      <rect fill="#000000" x="0" y="0" width="400" height="300">rect>
      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
    mask>
  defs>
svg>

<div class="container">
    <img src="balloons.jpg" alt="Balloons">
div>

0

Ưu điểm của phương pháp này là mặt nạ có thể được áp dụng cho bất kỳ phần tử HTML nào, không chỉ một hình ảnh. Thật không may, Firefox là trình duyệt duy nhất hỗ trợ phương pháp này

Tuy nhiên, tất cả không bị mất, đối với trường hợp phổ biến nhất là che hình ảnh, chúng ta có thể đưa hình ảnh vào SVG

Mặt nạ với một gradient

Sử dụng một gradient CSS làm mặt nạ của bạn là một cách tao nhã để đạt được một vùng mặt nạ mà không cần phải gặp rắc rối khi tạo hình ảnh hoặc SVG

Ví dụ, một gradient tuyến tính đơn giản được sử dụng làm mặt nạ có thể đảm bảo rằng phần dưới cùng của hình ảnh sẽ không quá tối bên dưới chú thích

Bạn có thể sử dụng bất kỳ loại chuyển màu nào được hỗ trợ và thỏa sức sáng tạo tùy thích. Ví dụ tiếp theo này sử dụng chuyển màu xuyên tâm để tạo mặt nạ hình tròn để chiếu sáng phía sau chú thích

Sử dụng nhiều mặt nạ

Đối với ảnh nền, bạn có thể chỉ định nhiều nguồn mặt nạ, kết hợp chúng để có được hiệu ứng mong muốn. Điều này đặc biệt hữu ích nếu bạn muốn sử dụng một mẫu được tạo bằng độ dốc CSS làm mặt nạ của mình. Chúng thường sẽ sử dụng nhiều hình nền và do đó có thể dễ dàng dịch thành mặt nạ

Ví dụ, tôi đã tìm thấy một mẫu bàn cờ đẹp trong bài viết này. Mã, sử dụng hình nền, trông như thế này

<svg width="0" height="0" viewBox="0 0 400 300">
  <defs>
    <mask id="mask">
      <rect fill="#000000" x="0" y="0" width="400" height="300">rect>
      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
    mask>
  defs>
svg>

<div class="container">
    <img src="balloons.jpg" alt="Balloons">
div>

1

Để biến mẫu này hoặc bất kỳ mẫu nào khác được thiết kế cho hình nền thành mặt nạ, bạn sẽ cần thay thế thuộc tính

<svg width="0" height="0" viewBox="0 0 400 300">
  <defs>
    <mask id="mask">
      <rect fill="#000000" x="0" y="0" width="400" height="300">rect>
      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
    mask>
  defs>
svg>

<div class="container">
    <img src="balloons.jpg" alt="Balloons">
div>

00 bằng thuộc tính

<svg width="0" height="0" viewBox="0 0 400 300">
  <defs>
    <mask id="mask">
      <rect fill="#000000" x="0" y="0" width="400" height="300">rect>
      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
    mask>
  defs>
svg>

<div class="container">
    <img src="balloons.jpg" alt="Balloons">
div>

01 có liên quan, bao gồm cả thuộc tính có tiền tố

<svg width="0" height="0" viewBox="0 0 400 300">
  <defs>
    <mask id="mask">
      <rect fill="#000000" x="0" y="0" width="400" height="300">rect>
      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
    mask>
  defs>
svg>

<div class="container">
    <img src="balloons.jpg" alt="Balloons">
div>

02

<svg width="0" height="0" viewBox="0 0 400 300">
  <defs>
    <mask id="mask">
      <rect fill="#000000" x="0" y="0" width="400" height="300">rect>
      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
    mask>
  defs>
svg>

<div class="container">
    <img src="balloons.jpg" alt="Balloons">
div>

5

Có một số hiệu ứng thực sự đẹp mắt được tạo ra bằng cách áp dụng các mẫu chuyển màu cho hình ảnh. Hãy thử phối lại Glitch và thử nghiệm một số biến thể khác

Cùng với việc cắt xén, mặt nạ CSS là một cách để thêm sự thú vị cho hình ảnh và các thành phần HTML khác mà không cần sử dụng ứng dụng đồ họa