Quay về MỤC LỤC TỰ HỌC CSS
·
Opacity là độ trong suốt của phần tử HTML
·
Thuộc tính này nhận giá trị từ: 0.0-1.0
Ví dụ:
img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
1. Chuyển độ trong suốt kết hợp hiệu ứng :hover
Ví dụ 1:
img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
Ví dụ 2: tạo chiếc hộp trong suốt
2. Hiệu ứng trong suốt dùng màu nền rgba
Ví dụ 1:
div {
background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */
}
background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */
}
Ví dụ 2: chữ trong chiếc hộp trong suốt
<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>
Tác giả: #drM
Nguồn: Sưu Tầm
Nguồn: Sưu Tầm
Không có nhận xét nào:
Đăng nhận xét