opacity để thêm độ trong suốt vào background của một phần tử, tất cả các phần tử con của nó sẽ kế thừa cùng một độ trong suốt. Điều này có thể làm cho văn bản bên trong một phần tử hoàn toàn trong suốt khó đọc.css backgrounds
Thuộc tính background trong CSS được sử dụng để thêm các hiệu ứng nền cho phần tử HTML.
Trong loạt bài liên quan tới CSS background này, chúng sẽ tìm hiểu về các thuộc tính nền CSS như sau:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- background (thuộc tính viết tắt)
CSS Background-color
Thuộc tính CSS background-color quy định màu nền cho một phần tử HTML.
Với CSS, một màu thường được chỉ định bởi:
- Tên màu hợp lệ - như "red"
- Giá trị màu HEX - như "#ff0000"
- Giá trị mà RGB - như "rgb(255,0,0)"
Chúng ta có thể đặt màu nền cho bất kỳ phần tử HTML nào.
Ví dụ: Màu nền của trang được đặt như sau:
<style> h1 { background-color: green; } div { background-color: lightblue; } p { background-color: yellow; } </style>
Độ mờ/ Độ trong suốt
Thuộc tính opacity quy định độ mờ của một phần tử. Nó có thể nhận giá trị từ 0,0 - 1,0. Giá trị càng thấp, phần tử càng mờ.
Độ mờ đục 1
Độ mờ 0,6
Độ mờ 0,3
Độ mờ 0,1
Độ mờ/ Độ trong suốt sử dụng RGBA
Nếu chúng ta không muốn áp dụng độ mờ cho các phần tử con, như trong ví dụ ở trên, thì chúng ta có thể sử dụng các giá trị màu RGBA.
Độ mờ 100%
Độ mờ 60%
Độ mờ 30%
Độ mờ 10%
Như trong bài CSS color, chúng ta có thể sử dụng RGB làm giá trị màu. Ngoài RGB, chúng ta có thể sử dụng giá trị màu RGB với kênh alpha (RGB A) - chỉ định độ mờ cho một màu.
Giá trị màu RGBA được chỉ định bằng: rgba (red, green, blue, alpha). Tham số alpha là một số nằm trong khoảng 0.0 (hoàn toàn trong suốt) và 1.0 (hoàn toàn không trong suốt).