Làm cách nào để làm cho hình nền trong suốt trong CSS chứ không phải văn bản?

Tính minh bạch đóng vai trò quan trọng trong phát triển giao diện người dùng. Nó cho phép bạn chọn mức độ trong suốt của các phần tử trên trang web của bạn

Bạn có thể điều chỉnh độ trong suốt theo nhiều cách – vì tất nhiên, trong CSS, có nhiều cách để thực hiện cùng một việc

Thuộc tính CSS

1 là cách đầu tiên bạn có thể nghĩ đến để thay đổi độ trong suốt. Nhưng không phải lúc nào thuộc tính này cũng có thể giải cứu được, đặc biệt là khi có một hình nền có văn bản mà bạn muốn làm trong suốt

Vì vậy, trong bài viết này, tôi sẽ chỉ cho bạn nhiều cách khác nhau để bạn có thể điều chỉnh độ trong suốt để bạn có thể bắt đầu triển khai nó trong các dự án viết mã của mình

Độ trong suốt của hình ảnh với thuộc tính Độ mờ CSS

Để làm cho hình ảnh trong suốt, bạn có thể sử dụng thuộc tính CSS

1, như tôi đã đề cập ở trên. Cú pháp cơ bản của thuộc tính độ mờ được hiển thị trong đoạn mã bên dưới

selector {
          opacity: value;
      }

Thuộc tính opacity nhận các giá trị từ

1 đến

2, với

3 là giá trị mặc định cho tất cả các phần tử. Giá trị càng thấp, càng minh bạch. Vì vậy, nếu một phần tử có độ mờ là

4, nó sẽ ẩn đi

Bạn có thể tìm ví dụ về các giá trị độ mờ khác nhau trong đoạn mã bên dưới

Tôi đã thêm một số CSS để căn giữa mọi thứ trên trang

body {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }


 img {
        opacity: 1;
      }

Giá trị độ mờ của

3 là giá trị mặc định, vì vậy hình ảnh sẽ xuất hiện như thế này

________số 8

Mã này cung cấp cho chúng tôi độ mờ 50% và bạn có thể thấy rằng logo đã mờ đi một chút

img {
        opacity: 0;
      }

Với độ mờ là

4, hình ảnh trong suốt 100%, vì vậy nó trở nên vô hình

Cách duy nhất để chắc chắn rằng hình ảnh có trên trang là kiểm tra nó bằng devtools của trình duyệt của bạn

Bạn có thể sử dụng giá trị độ mờ này để làm nhiều việc – ví dụ: bạn có thể sử dụng giá trị này để bao gồm văn bản trên hình ảnh chính trên trang web

Bạn có thể thắc mắc tại sao bạn muốn ẩn nội dung với giá trị độ mờ là 0. Chà, nó có thể hữu ích trong hoạt ảnh cũng như trong việc xây dựng các trò chơi HTM + CSS + JavaScript

Chắc chắn bạn sẽ muốn sử dụng tính năng định vị CSS để giúp bạn sắp xếp mọi thứ. Tôi sẽ thảo luận về điều này trong các phần tiếp theo của bài viết

Độ trong suốt của hình nền trong HTML và CSS

CSS cung cấp một cách để đặt hình nền cho phần tử vùng chứa bằng thuộc tính ________ 17, vì vậy bạn không nhất thiết phải làm điều đó với CSS. Điều này có nghĩa là bạn cũng có thể đặt văn bản trong vùng chứa

2____13

Nhược điểm của phương pháp này là độ mờ được đặt cho vùng chứa hình ảnh và văn bản. Vì vậy, độ mờ cũng ảnh hưởng đến văn bản, không chỉ hình ảnh. Đây có lẽ không phải là những gì bạn muốn

Giải pháp

Theo mặc định, khi bạn áp dụng độ mờ cho vùng chứa, con cháu cũng thừa hưởng nó

Một giải pháp thay thế trong tình huống này là đặt hình nền trong HTML. Điều này giúp dễ dàng chỉ áp dụng độ mờ cho hình ảnh, thay vì đặt hình nền cho vùng chứa trong CSS

Khoảng thời gian này, hình ảnh và văn bản sẽ được tách biệt, vì vậy văn bản sẽ không kế thừa giá trị đã đặt cho

1

Điều này có nghĩa là bạn cũng phải sử dụng định vị CSS để căn chỉnh văn bản trong hình ảnh

4

5

Trong đoạn mã CSS ở trên, tôi sử dụng

9 để căn giữa mọi thứ trên trang

Phần tử chứa

body {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }


 img {
        opacity: 1;
      }

0 với lớp

body {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }


 img {
        opacity: 1;
      }

1 được định vị là

body {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }


 img {
        opacity: 1;
      }

2, vì vậy bạn có thể định vị văn bản

body {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }


 img {
        opacity: 1;
      }

3 là

body {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }


 img {
        opacity: 1;
      }

4 bên trong nó. Thao tác này sẽ đẩy văn bản

body {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }


 img {
        opacity: 1;
      }

3 lên góc trên cùng bên trái của hình ảnh. Các thuộc tính

body {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }


 img {
        opacity: 1;
      }

6 và

body {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }


 img {
        opacity: 1;
      }

7 sau đó được sử dụng để đẩy văn bản xuống góc dưới bên trái của hình ảnh

Nếu bạn đang thắc mắc các thuộc tính

body {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }


 img {
        opacity: 1;
      }

6 và

body {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }


 img {
        opacity: 1;
      }

7 là gì, thì chúng là các thuộc tính bạn có quyền truy cập khi sử dụng thuộc tính hiển thị

Ngoài hai điều này, bạn cũng có quyền truy cập vào các thuộc tính

img {
     opacity: 0.5;
   }

0 và

img {
     opacity: 0.5;
   }

1. Chúng cho phép bạn định vị một phần tử ở bất cứ đâu

Cuối cùng, hình ảnh bị mờ và văn bản không bị ảnh hưởng

Phần kết luận

Trong bài viết này, bạn đã học cách sử dụng thuộc tính opacity của CSS để làm cho hình ảnh trong suốt

Vì CSS vẫn phức tạp và hơi kỳ lạ, nên sẽ hữu ích khi kết hợp thuộc tính độ mờ với các tính năng CSS khác, chẳng hạn như định vị để đưa nó vào sử dụng đúng cách

Ngoài định vị CSS, bạn cũng có thể sử dụng thuộc tính

1 với các phần tử giả CSS chẳng hạn như

img {
     opacity: 0.5;
   }

3 và

img {
     opacity: 0.5;
   }

4, đây là một cách làm khó hiểu

Cảm ơn bạn đã đọc và tiếp tục mã hóa

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

---

Kolade Chris

Nhà phát triển web và nhà văn kỹ thuật tập trung vào các công nghệ giao diện người dùng

---

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Làm cách nào để thay đổi độ mờ của nền mà không ảnh hưởng đến CSS của văn bản?

Làm cách nào để áp dụng độ mờ mà không ảnh hưởng đến phần tử con bằng HTML CSS?

Làm cách nào để xóa nền khỏi CSS văn bản?