Thuộc tính opacity xác định độ mờ, độ 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ể lấy giá trị từ 0.0 - 1.0, giá trị càng nhỏ thì độ trong suốt càng nhiều.
Khi bạn sử dụng 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 lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<div class="box">
<h1>Link Css | Tienanhvn</h1>
<a href="">Submit</a>
</div>
<div class="opacity">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjntisMfmBqLd__uLCw4h75OTr29thEJdu2vKrPQ-DNVB4jg8zZsnUmideLfiuPwER53qXPbS3Oa2UnRiIfoaktJHwFCwqlT5fF0ZZ3F7BZMKUkV33KjB86ilEzw50wW6rxUWzcFFvwuPE/w179-h320/a.jpg" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjntisMfmBqLd__uLCw4h75OTr29thEJdu2vKrPQ-DNVB4jg8zZsnUmideLfiuPwER53qXPbS3Oa2UnRiIfoaktJHwFCwqlT5fF0ZZ3F7BZMKUkV33KjB86ilEzw50wW6rxUWzcFFvwuPE/w179-h320/a.jpg" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjntisMfmBqLd__uLCw4h75OTr29thEJdu2vKrPQ-DNVB4jg8zZsnUmideLfiuPwER53qXPbS3Oa2UnRiIfoaktJHwFCwqlT5fF0ZZ3F7BZMKUkV33KjB86ilEzw50wW6rxUWzcFFvwuPE/w179-h320/a.jpg" />
</div>
</body>
</html>
Hiệu ứng độ trong suốt khi rê chuột
dùng thuộc tính hover
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 */
}
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.3;
filter: alpha(opacity=30); /* sử dụng cho IE8 trở về trước */
}
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
color: purple
}
div {
background-color: #58257b;
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 Quản Trị Mạng</h2>
<p>tienanhvn.com 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>Làng công nghệ - opacity 0.2</p></div>
<div class="second"><p>Công nghệ - opacity 0.4</p></div>
<div class="third"><p>Khoa học - opacity 0.6</p></div>
<div class="fourth"><p>Cuộc sống - opacity 0.8</p></div>
<div><p>Lập trình - opacity 1 (mặc định)</p></div>
</body>
</html>
No comments:
Post a Comment