Thuộc tính opacity trong CSS3

Opacity là thuộc tính mới trong CSS và thuộc phiên bản mới nhất của CSS3, nó quy định độ trong suốt của hình ảnh hoặc nền màu nào đó.

Nếu từng biết Photoshop bạn chắc không lạ opacity. Bằng CSS3 chúng ta không cần dùng phần mềm chỉnh sửa ảnh nào nữa, các thành phần sẽ được điều chỉnh độ trong suốt tùy ý.

Cùng Kiến càng thử ngay và luôn nhé!

Hãy nhìn vào bức ảnh trên, thực tế nó nét hơn nhưng được làm trong suốt chỉ còn 60% so với bức gốc, dưới đây chính là bức gốc:

Đoạn code để thực hiện trong suốt cho ảnh là:

img
{
opacity:0.6;
filter:alpha(opacity=60); /* Cho IE8 và các phiên bản cũ hơn */
}

Xem thêm: code bo tròn ảnh.

Ngoài ra chúng ta cũng có thể làm trong suốt nền màu như thế này:

---

Theo đó, bạn có một ảnh làm background, thẻ div làm nền với màu xám, và chữ bên trên, để nền div không làm che background ảnh tôi làm nó trong suốt ở mức độ nào đó (nếu để trong suốt hoàn toàn – tương đương với bỏ nền thì chữ sẽ khó đọc).

Code mẫu:

<div style="background: url('images/bg.jpg'); height: 200px; padding: 50px; width: 300px;">
<div style="background-color: #cccccc; color: blue; filter: alpha(opacity=60); opacity: 0.6; padding: 15px; text-align: justify; width: 250px;">
<b>Đây là đoạn văn bản mẫu. Đây là đoạn văn bản mẫu. Đây là đoạn văn bản mẫu. Đây là đoạn văn bản mẫu. Đây là đoạn văn bản mẫu. Đây là đoạn văn bản mẫu. Đây là đoạn văn bản mẫu. Đây là đoạn văn bản mẫu. Đây là đoạn văn bản mẫu.</b>
</div>
</div>

Nguồn ảnh minh họa: freeimages.co.uk