Thuộc tính opacity chỉ định độ mờ đục / trong suốt của một phần tử.
Độ 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ử <div> (class = “background”) với hình nền và đường viền.
Sau đó, chúng ta tạo một <div> (class = “transbox”) khác bên trong <div> đầu tiên.
<div class = “transbox”> có màu nền và đường viền – div 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 phần tử <p>.
Top 6 opacity là gì tổng hợp bởi 350 Việt Nam
Opacity Là Gì? Cách Sử Dụng Opacity Trong Photoshop
- Tác giả: thietkeinan.truongthinh.info
- Ngày đăng: 02/14/2022
- Đánh giá: 4.79 (506 vote)
- Tóm tắt: Opacity – Được hiểu đơn giản là độ đậm nhạt của đối tượng. Khi bạn tăng Opacity thì đối tượng hiển thị rõ ràng, đậm nét và ngược lại nếu bạn giảm Opacity …
- Khớp với kết quả tìm kiếm: Khi các bạn muốn đối tượng hiển thị rõ ràng, đậm nét thì bạn tăng Opacity và khi bạn muốn đối tượng sẽ mờ đi, nhạt màu thì bạn giảm Opacity , thậm chí đối tượng sẽ trở nên trong suốt, biến mất nếu bạn giảm hết độ Opacity xuống còn 0%. Cho nên, …
- Nguồn: 🔗
Thuộc tính opacity | CSS3 – Học web chuẩn
- Tác giả: hocwebchuan.com
- Ngày đăng: 11/18/2022
- Đánh giá: 4.58 (344 vote)
- Tóm tắt: Thuộc tính opacity hiển thị cấp độ trong suốt cho thành phần, opacity là thuộc tính trong CSS3.
- Nguồn: 🔗
Opacity là gì? Cách sử dụng Opacity trong Photoshop
- Tác giả: edugate.vn
- Ngày đăng: 10/20/2022
- Đánh giá: 4.33 (211 vote)
- Tóm tắt: Opacity – Được hiểu đơn giản là độ đậm nhạt của đối tượng. Khi bạn tăng Opacity thì đối tượng hiển thị rõ ràng, đậm nét và ngược lại nếu bạn …
- Khớp với kết quả tìm kiếm: Khi bạn nhìn vào Opacity trong bảng layer chắc hẳn bạn sẽ thấy ngay bên dưới nó là mục Fill và mục này cũng có giá trị 100% giống như Opacity, đặc biệt hơn là nó cũng có công dụng làm mờ đối tượng như Opacity. Vậy tại sao Photoshop phải mất công …
- Nguồn: 🔗
Opacity là gì? Cách sử dụng Opacity trong Photoshop
- Tác giả: thuthuatphanmem.vn
- Ngày đăng: 12/22/2022
- Đánh giá: 4.03 (332 vote)
- Tóm tắt: Opacity có nghĩa là độ mờ và trong Photoshop thì Opacity cũng thể hiện rõ nghĩa này. Opacity trong Photoshop giúp người sử dụng có thể điều chỉnh được độ …
- Khớp với kết quả tìm kiếm: Photoshop là một trong số những phần mềm chính sửa hình ảnh phổ biến nhất trên thế giới. Với phần mềm Photoshop người sử dụng có thể sáng tạo ra rất nhiều điều thú vị khác nhau. Trong Photoshop có rất nhiều thuật ngữ khác nhau khiến người mới sử …
- Nguồn: 🔗
Opacity là gì? Định nghĩa và giải thích ý nghĩa – Filegi.com
- Tác giả: filegi.com
- Ngày đăng: 07/04/2022
- Đánh giá: 3.93 (396 vote)
- Tóm tắt: Đây là nghĩa tiếng Việt của thuật ngữ Opacity – một thuật ngữ thuộc nhóm Software Terms – Công nghệ thông tin. Độ phổ biến(Factor rating): 6/10. Opacity (phát …
- Nguồn: 🔗
Opacity trong Photoshop và cách sử dụng
- Tác giả: itplus-academy.edu.vn
- Ngày đăng: 01/29/2022
- Đánh giá: 3.64 (528 vote)
- Tóm tắt: Opacity là gì? Và làm cách nào để sử dụng Opacity một cách hiệu quả nhất trong Photoshop. ITPlus Academy sẽ chia sẻ cho các bạn.
- Khớp với kết quả tìm kiếm: Ngay bên dưới Opacity là mục Fill khi bạn nhìn vào nó trong bảng layer và mục này cũng có giá trị 100% giống như Opacity, và hơn thế là nó cũng có công dụng làm mờ đối tượng như Opacity. Vậy tại sao Photoshop phải mất công chia ra thành 2 công cụ …
- Nguồn: 🔗