CSS-CSS3


Home / Tài liệu CNTT / CSS-CSS3 / Thuộc tính Opacity/Transparency trong CSS làm mờ ảnh, nổi chữ

Thuộc tính Opacity/Transparency trong CSS làm mờ ảnh, nổi chữ

Bạn muốn sử dụng hình ảnh làm background, nhưng khiến chứ khó đọc, nếu bạn làm mờ hình ảnh thì văn bản đè lên ảnh cũng sẽ bị mờ theo. Vậy làm thế nào để làm mờ ảnh background và văn bản ở trên ảnh vẫn hiển thị rõ dễ đọc.

Dưới đây Gocchiase xin giới thiệu hai thuộc tính Opacity và Trasparency giúp làm mờ ảnh và cách để hiển thị văn bản dễ đọc hơn.

Thuộc tính opacity xác định độ mờ, độ trong suốt của một phần tử.

Độ trong suốt của hình ảnh

Thuộc tính opacity có thể lấy giá trị từ 0.0 – 1.0, giá trị càng nhỏ thì độ trong suốt càng nhiều.

Chú ý: Phiên bản Internet Explorer 8 trở về trước sử dụng filter:alpha(opacity=x). x có thể mang giá trị từ 0 đến 100. Giá trị càng thấp thì phần tử đó càng trong suốt.

Ví dụ:

Hiệu ứng trong suốt khi rê chuột

Thuộc tính opacity thường được sử dụng cùng với :hover để thay đổi độ trong của ảnh khi di chuột qua.

Ví dụ:

Ở ví dụ trên, đoạn CSS đầu tiên tương tự như code trong ví dụ 1 và thêm hiệu ứng khi người dùng di chuyển chuột qua một trong những hình ảnh thì hình ảnh sẽ rõ lên. Ngoài ra bạn có thể để ảnh ban đầu là rõ nét opacity bằng 1.0 mặc định, sau khi di chuột vào, ảnh sẽ sẽ mờ đi như sau:

Transparent Box

Khi sử dụng thuộc tính opacity để thêm độ mờ cho nền của một phần tử, tất cả phần tử con đều sẽ kế thừa độ mờ opacity đó như nhau. Điều này làm cho văn bản bên trong phần tử có độ mờ cao sẽ khó đọc:

Ví dụ:

Transparent Box sử dụng RGBA

Nếu không muốn áp dụng opacity cho các phần tử con như trong ví dụ trên, bạn có thể sử dụng các giá trị màu RGBA. Ví dụ chỉ thiết lập độ mờ cho màu nền, không thiết lập cho văn bản:

Ví dụ:

Văn bản nằm trong Transparent Box

Đầu tiên cần tạo ra một phần tử <div> (class = “background”) với một hình nền và một đường viền. Tiếp đến tạo một <div> (class = “transbox”) bên trong <div> đầu tiên. <div class = “transbox”> có màu nền, và một đường viền – div này là phần tử trong suốt. Bên trong <div> này, bạn thêm văn bản trong phần tử <p> thì đoạn này sẽ nằm trong Transparent Box.

 

Ví dụ:

Xem demo: https://trinhhai.w3spaces.com/saved-from-Tryit-2022-05-30.html