Thuộc tính transparent trong css

Question

1) Thuộc tính background-color trong CSS

- Thuộc tính background-color dùng để thiết lập "màu nền" của phần tử HTML.

Nội dung chính Show

1) Thuộc tính background-color trong CSS
2) Cách sử dụng thuộc tính background-color trong CSS
Độ trong suốt của hình ảnh (Transparent Image)
Hiệu ứng trong suốt khi di chuột (Transparent Hover Effect)
Giải thích ví dụ
Hộp trong suốt (Transparent Box)
Độ trong suốt sử dụng RGBA
Văn bản ở trong hộp trong suốt (Text in Transparent Box)
Giải thích ví dụ

- Ví dụ:

Phần tử này được thiết lập nền màu vàng

- Lưu ý: Đối với một phần tử HTML, phần diện tích được thiết lập màu nền sẽ bao gồm các phần:

border.
padding.
content.
(không bao gồm phần margin)

2) Cách sử dụng thuộc tính background-color trong CSS

- Để sử dụng thuộc tính background-color, ta dùng cú pháp như sau:

background-color: color|transparent|initial|inherit;

- Trong đó, ta thấy giá trị của thuộc tính background-color có thể được xác định bởi một trong bốn loại:

color	- Một giá trị màu cụ thể, nó có thể là: Tên màu, ví dụ: red, green, blue, .... Giá trị RGB, ví dụ: rgb(140, 51, 79), rgb(0, 228, 62), .... Giá trị HEX, ví dụ: #FFA500, #00FFFF, ....	Xem ví dụ
transparent	- Nền của phần tử sẽ có màu trong suốt. - Lưu ý: Nền trong suốt khác với nền màu trắng. Màu nền của phần tử trong suốt sẽ bị ảnh hưởng bởi màu nền của phần tử chứa nó.	Xem ví dụ
initial	- Sử dụng giá trị mặc định của nó. - Lưu ý: Mặc định thì nền của một phần tử sẽ có màu trong suốt, cho nên nó sẽ có ý nghĩa tương tự như giá trị transparent.	Xem ví dụ
inherit	- Kế thừa giá trị thuộc tính background-color từ phần tử cha của nó	Xem ví dụ

- Ngoài ra, thuộc tính background-color cũng thường được dùng để chỉnh màu nền cho văn bản.


        
        
        Tài liệu hướng dẫn học Lập Trình Web.

Xem ví dụ

Thuộc tính opacity chỉ định độ mờ đục / trong suốt của một phần tử.

Nội dung

Độ trong suốt của hình ảnh (Transparent Image)
Hiệu ứng trong suốt khi di chuột (Transparent Hover Effect)
- Giải thích ví dụ
Hộp trong suốt (Transparent Box)
Độ trong suốt sử dụng RGBA
Văn bản ở trong hộp trong suốt (Text in Transparent Box)
- Giải thích ví dụ

Độ trong suốt của hình ảnh (Transparent Image)

Thuộc tính opacity có thể được thiết lập giá trị từ 0.0 – 1.0. Với giá trị càng nhỉ thì độ trong suốt càng nhiều:


img {
  opacity: 0.5;
}

Hiệu ứng trong suốt khi di chuột (Transparent Hover Effect)

Thuộc tính opacity thường được sử dụng cùng với bộ chọn :hover để thay đổi độ trong suốt của hình ảnh khi di chuyển chuột vào:


img {
  opacity: 0.5;
}

img:hover {
  opacity: 1.0;
}

Giải thích ví dụ

Khối CSS đầu tiên tương tự như mã trong Ví dụ 1. Ngoài ra, chúng ta thêm những gì sẽ xảy ra khi người dùng di chuột qua một trong các hình ảnh. Trong trường hợp này, chúng ta muốn hình ảnh KHÔNG trong suốt khi người dùng di chuột qua nó. CSS cho điều này là opacity:1;
Khi con trỏ chuột di chuyển ra khỏi hình ảnh, hình ảnh sẽ trong suốt trở lại.
Một ví dụ về hiệu ứng di chuột đảo ngược:


img:hover {
  opacity: 0.5;
}

Hộp trong suốt (Transparent Box)

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


div {
  opacity: 0.3;
}

Độ trong suốt sử dụng RGBA

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

Ngoài RGB, CSS3 giới thiệu giá trị màu RGB với kênh alpha (RGBA) – xác định độ mờ của màu. Giá trị màu RGBA được chỉ định bằng: rgba (đỏ, xanh, xanh, alpha). Thông số alpha là một số giữa 0,0 (hoàn toàn trong suốt) và 1,0 (đục hoàn toàn).


div {
  background: rgba(76, 175, 80, 0.3) /* Nền xanh với 30% opacity */
}

Văn bản ở trong hộp trong suốt (Text in Transparent Box)


<html>
<head>
<style>
div.background {
  background: url("https://timoday.edu.vn/wp-content/uploads/2021/04/img_mountains.jpg") repeat;
  border: 2px solid black;
}

div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
}

div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}
</style>
</head>
<body>

<div class="background">
  <div class="transbox">
    <p>Đây là văn bản nằm trong hộp trong suốt.</p>
  </div>
</div>

</body>
</html>

Giải thích ví dụ

Đầu tiên, chúng ta tạo phần tử

(class = “background”) với hình nền và đường viền.

Sau đó, chúng ta tạo một

(class = “transbox”) khác bên trong

đầu tiên.

có màu nền và đường viền – div trong suốt.

Bên trong

trong suốt, chúng ta thêm một số văn bản bên trong phần tử

.

programming css Background transparent CSS Opacity Background-color: transparent z-index trong css Background-color trong CSS Opacity la gì

Thuộc tính transparent trong css

1) Thuộc tính background-color trong CSS

2) Cách sử dụng thuộc tính background-color trong CSS

Độ trong suốt của hình ảnh (Transparent Image)

Hiệu ứng trong suốt khi di chuột (Transparent Hover Effect)

Giải thích ví dụ

Hộp trong suốt (Transparent Box)

Độ trong suốt sử dụng RGBA

Văn bản ở trong hộp trong suốt (Text in Transparent Box)

Giải thích ví dụ

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội