Thuộc tính opacity trong CSS
Trần Thị Vân - 1250
- 18/07/2025
Chức năng của Thuộc tính opacity trong CSS
Thuộc tính opacity trong CSS dùng để làm mờ hoặc ẩn chữ, hình ảnh, background,... từ các thẻ HTML, giúp lập trình viên có nhiều tùy chỉnh giao diện hơn.
Cú pháp của Thuộc tính opacity trong CSS
opacity: giatri;
giatri: Giá trị để làm mờ hoặc ẩn chữ, hình ảnh, background,... từ các thẻ HTML (Ví dụ: 0.7, 0.8,....)
Ví dụ Thuộc tính opacity trong CSS
opacity dùng để ẩn phần tử HTML
{opacity:0}
opacity dùng để làm mờ phần tử HTML:
{opacity:0.7}
opacity làm mờ background của phần tử HTML:
background: rgba(0, 0, 0, 0.7);
opacity làm mờ cho hình ảnh:
img{opacity:0.5}
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Ví dụ Thuộc tính opacity trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div{width:100%; float:left; height:auto; padding:15px; background:green; color:red; margin-bottom:10px}
img{width:150px; height:auto;}
</style>
</head>
<body>
<h1>Chạy thử Ví dụ Thuộc tính opacity trong CSS</h1>
<p>Dùng để làm mờ hoặc ẩn chữ, hình ảnh, background,... từ các thẻ HTML:</p>
<div style="opacity:1;" >opacity:1;</div>
<!--Làm mờ nền và làm mờ chữ-->
<div style="opacity:0.7;" >opacity:0.7;</div>
<!--Làm mờ nền không mờ chữ-->
<div style="background: rgba(0, 128, 0, 0.7);" >background: rgba(0, 128, 0, 0.7);</div>
<h4>Hình gốc</h4>
<img src="https://webmoi.vn//media/images/background-image-full-man-hinh.jpg">
<h4>Hình opacity:0.7;</h4>
<img style="opacity:0.7;" src="https://webmoi.vn//media/images/background-image-full-man-hinh.jpg">
</body>
</html>
Những lưu ý khi sử dụng thuộc tính opacity trong CSS
Khi sử dụng opacity, cần chú ý đến phạm vi ảnh hưởng của thuộc tính này. Hiểu đúng cách hoạt động sẽ giúp giao diện có hiệu ứng trong suốt đẹp mắt mà không làm nội dung khó đọc hoặc gây ra hành vi không mong muốn.
Opacity ảnh hưởng đến toàn bộ phần tử
Giá trị opacity được áp dụng cho một phần tử sẽ tác động đến cả phần tử đó và các nội dung nằm bên trong. Vì vậy, nếu đặt độ trong suốt cho một khối chứa văn bản, hình ảnh hoặc nút bấm, tất cả những thành phần này cũng trở nên trong suốt theo.
Ví dụ, nếu một hộp có opacity: 0.5, không chỉ nền của hộp giảm độ đậm mà chữ và các phần tử con cũng bị ảnh hưởng. Đây là điểm cần lưu ý khi muốn tạo một nền bán trong suốt nhưng vẫn giữ văn bản rõ nét.
.box {
opacity: 0.5;
}
Nếu mục đích chỉ là làm nền trong suốt, có thể cân nhắc sử dụng màu có kênh alpha thay vì áp dụng opacity cho cả phần tử.
Phân biệt opacity với rgba() khi làm trong suốt
opacity làm giảm độ hiển thị của toàn bộ phần tử, trong khi rgba() cho phép kiểm soát độ trong suốt ngay trên một giá trị màu. Vì vậy, hai cách này có thể tạo ra kết quả khác nhau dù cùng sử dụng mức trong suốt tương tự.
Chẳng hạn, nếu chỉ muốn làm nền trắng trong suốt nhưng vẫn giữ chữ có màu đậm, sử dụng màu RGBA sẽ phù hợp hơn.
.box {
background-color: rgba(255, 255, 255, 0.5);
}
Cách này giữ văn bản và các phần tử bên trong ở độ hiển thị bình thường, đồng thời chỉ điều chỉnh độ trong suốt của màu nền. Đây thường là lựa chọn tốt khi thiết kế thẻ nội dung, hộp thông báo hoặc lớp nền phủ.
Không nên dùng opacity để ẩn nội dung quan trọng
Đặt opacity: 0 khiến phần tử trở nên vô hình về mặt hiển thị, nhưng phần tử vẫn có thể tồn tại trong bố cục và vẫn có những hành vi khác tùy trường hợp. Vì vậy, không nên xem opacity như một phương pháp mặc định để ẩn các nội dung quan trọng.
Với những thành phần cần người dùng đọc, thao tác hoặc tương tác, nên lựa chọn phương pháp ẩn phù hợp với mục đích thực tế. Nếu chỉ muốn tạo hiệu ứng mờ khi chưa được chọn hoặc khi di chuột, opacity lại rất hữu ích.
.button:hover {
opacity: 0.7;
}
Cách sử dụng này tạo ra phản hồi trực quan khi người dùng tương tác mà không cần thay đổi cấu trúc HTML. Quan trọng nhất là chọn mức opacity vừa phải để trạng thái của phần tử vẫn dễ nhận biết.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính opacity trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
