Thuộc tính Opacity / Transparency trong CSS
Thuộc tính opacity xác định độ 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ể đượ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. Chú ý: phiên bản IE8 trở về trước sử dụng ...
Thuộc tính opacity xác định độ 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ể đượ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.
Chú ý: phiên bản IE8 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.
img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
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 bộ chọn :hover để thay đổi độ trong của ảnh khi rê chuột vào.
img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
Giải thích ví dụ:
Khối CSS đầu tiên tương tự như mã trong Ví dụ 1. Ngoài ra, thêm một số hiệu ứng khi người dùng di chuyển chuột qua một trong những hình ảnh. Trong trường hợp này, nếu muốn hình ảnh KHÔNG được trong suột khi người dùng di chuột qua nó. CSS cho điều này là opacity:1;.
Khi rê chuột vào một ảnh bất kỳ, ảnh đó sẽ mờ đi.
img:hover {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
Hộp mờ
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 sẽ kế thừa độ mờ như nhau. Điều này làm cho văn bản trong phần tử có độ mờ cao sẽ khó đọc:
div {
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
}
Làm mờ 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) /* Green background with 30% opacity */
}
Văn bản ở trong hộp mờ
<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>
Đầu tiên, chúng ta 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. Sau đó chúng ta tạo ra 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 là trong suốt. Bên trong <div> trong suốt, chúng ta thêm một số văn bản bên trong một phần tử <p>.
- Học lập trình front-end cơ bản với bootstrap 4/html5/css3
- Học lập trình front-end nâng cao qua Project thực tế
- Học thiết kế web với Photoshop, CSS theo kiểu SASS
- Học cách sử dụng Git_hub cho lập trình viên
- Học lập trình Back-end PHP theo mô hình MVC cơ bản
- Học lập trình Back-end PHP theo mô hình MVC nâng cao
- Học lập trình Cơ sở dữ liệu với AngularJS
- Học lập trình theme wordpress. Làm ra mọi website hoàn chỉnh với wordpress
- Combo lập trình front-end từ cơ bản – nâng cao
- Combo lập trình back-end từ cơ bản đến nâng cao
- Combo lập trình web với word press từ A-Z
