Làm mờ background CSS bằng thuộc tính Opacity/Transparency khá dễ. Dưới đây là những điều bạn cần biết về cách dùng Opacity CSS.
CSS (Cascading Style Sheets) là một ngôn ngữ được dùng để tìm và định dạng các phần tử trên web được phát triển bằng HTML. Hiểu đơn giản, nó là ngôn ngữ tạo nên giao diện web như thiết kế mong muốn của quản trị viên.
Opacity (Độ mờ) – và ngược lại, độ trong suốt (transparency) – có thể được sử dụng trong thiết kế trang web để tạo độ tương phản và củng cố bản sắc thương hiệu. Ví dụ: trang chủ của Bellavista Building Group có hình nền hơi trong suốt với lớp phủ văn bản. Kỹ thuật thiết kế này phản ánh các giá trị thương hiệu của họ, bao gồm tính minh bạch cũng như tính toàn vẹn và trách nhiệm giải trình.
Giống như cuộn ngang, kết cấu web và nhiều kỹ thuật thiết kế web khác, độ mờ và độ trong suốt được sử dụng một cách tiết kiệm và có chủ đích. Dưới đây chúng tôi sẽ hướng dẫn cách kiểm soát độ mờ của các yếu tố khác nhau, bao gồm:
{index}
Độ trong suốt của hình ảnh
Thuộc tính opacity có thể lấy giá trị từ 0.0 – 1.0, giá trị càng nhỏ thì độ trong suốt càng nhiều.
Chú ý: Phiên bản Internet Explorer 8 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); /* sử dụng cho IE8 trở về trước */
}<!DOCTYPE html>
<html>
<head>
<style>
h2 { color: #009F41 }
div {
background-color: #009F41;
color: white;
padding: 9px;
}
div.first {
opacity: 0.2;
filter: alpha(opacity=20); /* sử dụng cho IE8 trở về trước */
}
div.second {
opacity: 0.4;
filter: alpha(opacity=40); /* sử dụng cho IE8 trở về trước */
}
div.third {
opacity: 0.6;
filter: alpha(opacity=60); /* sử dụng cho IE8 trở về trước */}
div.fourth {
opacity: 0.8;
filter: alpha(opacity=80); /* sử dụng cho IE8 trở về trước */
}
</style>
</head>
<body>
<h2>Website Chia Sẻ Kiến Thức</h2>
<p>Chiasekienthuc.com.vn là mạng xã hội về khoa học công nghệ, đáp ứng nhu cầu về nhiều lĩnh vực công nghệ hơn như điện thoại, thiết bị thông minh, điện tử, bảo mật máy tính...</p>
<div class="first">
<p>Opacity 0.2</p>
</div>
<div class="second">
<p>Opacity 0.4</p>
</div>
<div class="third">
<p>Opacity 0.6</p>
</div>
<div class="fourth">
<p>Opacity 0.8</p>
</div>
<div>
<p>Opacity 1 (mặc định)</p>
</div>
</body>
</html>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 :hover để thay đổi độ trong của ảnh khi di chuột qua.
img {
opacity: 0.5;
filter: alpha(opacity=50); /* sử dụng cho IE8 trở về trước */
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* sử dụng cho IE8 trở về trước */
}
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family:Tahoma, Geneva, sans-serif }
div {
padding: 10px;
}
img {
margin-right:10px;
opacity:0.5;
filter: alpha(opacity=50); /* sử dụng cho IE8 trở về trước */
}
img:hover {
opacity:1.0;
filter: alpha(opacity=100); /* sử dụng cho IE8 trở về trước */
}
</style>
</head>
<body>
<div>
<img src="photo-2.jpg">
<img src="photo-2.jpg">
<img src="photo-2.jpg">
</div>
</body>
</html>Ở ví dụ trên, đoạn CSS đầu tiên tương tự như code trong ví dụ 1 và thêm hiệu ứng khi người dùng di chuyển chuột qua một trong những hình ảnh thì hình ảnh sẽ rõ lên. Ngoài ra bạn có thể để ảnh ban đầu là rõ nét opacity bằng 1.0 mặc định, sau khi di chuột vào, ảnh sẽ sẽ mờ đi.
Transparent Box
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 đều sẽ kế thừa độ mờ opacity đó như nhau. Điều này làm cho văn bản bên trong phần tử có độ mờ cao sẽ khó đọc:
div {
opacity: 0.4;
filter: alpha(opacity=40); /* sử dụng cho IE8 trở về trước */
}Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family:Tahoma, Geneva, sans-serif }
div {
background-color: #009900;
padding: 10px;
}
div.first {
opacity: 0.2;
filter: alpha(opacity=20); /* sử dụng cho IE8 trở về trước */
}
div.second {
opacity: 0.4;
filter: alpha(opacity=40); /* sử dụng cho IE8 trở về trước */
}
div.third {
opacity: 0.6;
filter: alpha(opacity=60); /* sử dụng cho IE8 trở về trước */
}
div.fourth {
opacity: 0.8;
filter: alpha(opacity=80); /* sử dụng cho IE8 trở về trước */
}
</style>
</head>
<body>
<div class="first">
<p align="center"><strong>Opacity 0.2</strong></p>
</div>
<div class="second">
<p align="center"><strong>Opacity 0.4</strong></p>
</div>
<div class="third">
<p align="center"><strong>Opacity 0.6</strong></p>
</div>
<div class="fourth">
<p align="center"><strong>Opacity 0.8</strong></p>
</div>
<div>
<p align="center"><strong>Opacity 1 (mặc định)</strong></p>
</div>
</body>
</html>
Transparent Box sử dụng RGBA
Nếu không muốn áp dụng opacity cho các phần tử con như trong ví dụ trên, bạn có thể sử dụng các giá trị màu RGBA. Ví dụ chỉ thiết lập độ mờ cho màu nền, không thiết lập cho văn bản:
div { background: rgba(128, 0, 128, 0.3) /* Nền màu tím với 30% opacity */}Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family:Tahoma, Geneva, sans-serif }
div {
background-color: rgb(0,153,0);
padding:10px;
}
div.first {
background: rgba(0,153,0, 0.8);
}
div.second {
background: rgba(0,153,0, 0.6);
}
div.third {
background: rgba(0,153,0, 0.4);
}
div.fourth {
background: rgba(0,153,0, 0.2);
}
</style>
</head>
<body>
<div>
<p align="center"><strong>Opacity 1 (mặc định)</strong></p>
</div>
<div class="first">
<p align="center"><strong>Opacity 0.8</strong></p>
</div>
<div class="second">
<p align="center"><strong>Opacity 0.6</strong></p>
</div>
<div class="third">
<p align="center"><strong>Opacity 0.4</strong></p>
</div>
<div class="fourth">
<p align="center"><strong>Opacity 0.2</strong></p>
</div>
</body>
</html>
Văn bản nằm trong Transparent Box
Đầu tiên cần 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. Tiếp đến tạo một <div> (class = “textBox”) bên trong <div> đầu tiên. <div class = “textBox”> có màu nền, và một đường viền – div này là phần tử trong suốt. Bên trong <div> này, bạn thêm văn bản trong phần tử <p> thì đoạn này sẽ nằm trong Transparent Box.
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family:Tahoma, Geneva, sans-serif }
div.background {
padding: 12px;
border:3px solid #F60;
background:url(photo-1.jpg) center center no-repeat;
}
div.textBox {
background-color:#FFFFFF;
padding:7px 20px;
border:3px solid #F60;
opacity:0.75;
filter: alpha(opacity=75); /* sử dụng cho IE8 trở về trước */
}
</style>
</head>
<body>
<div class="background">
<div class="textBox">
<p align="center"><strong>Đây là ô văn bản nền trắng có độ trong suốt Opacity: 0.75 (75%)</strong></p>
</div>
</div>
</body>
</html>