Chủ Nhật, 29 tháng 12, 2013
CSS Image Opacity / Transparency
Tài sản opacity CSS là một phần của các khuyến nghị của W3C CSS3.
Ví dụ 1 - Tạo một hình ảnh trong suốt
Tài sản CSS3 cho minh bạch là độ mờ đục .
Đầu tiên chúng tôi sẽ chỉ cho bạn cách để tạo ra một hình ảnh trong suốt với CSS.
Hình ảnh thường xuyên:
Cùng một hình ảnh với tính minh bạch:
Nhìn vào CSS sau:
img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
IE9, Firefox, Chrome, Opera, Safari và sử dụng tài sản opacity cho minh bạch. Tài sản mờ đục có thể có một giá trị 0,0-1,0. Một giá trị thấp hơn làm cho các yếu tố minh bạch hơn.
IE8 và sử dụng trước đó lọc: alpha (opacity = x) . X có thể có một giá trị 0-100. Một giá trị thấp hơn làm cho các yếu tố minh bạch hơn.
Ví dụ 2 - Hình ảnh minh bạch - Di chuột Effect
Chuột lên hình ảnh:
CSS trông như thế này:
img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
Khối CSS đầu tiên là tương tự như các mã trong Ví dụ 1. Ngoài ra, chúng tôi đã thêm vào những gì sẽ xảy ra khi người dùng di chuột qua một trong những hình ảnh. Trong trường hợp này chúng tôi muốn hình ảnh không được minh bạch khi người dùng di chuột qua nó.
CSS cho điều này là: opacity = 1 .
IE8 và trước đó: bộ lọc: alpha (opacity = 100) .
Khi con trỏ chuột di chuyển ra khỏi các hình ảnh, hình ảnh sẽ được minh bạch một lần nữa.
Ví dụ 3 - Văn bản trong hộp trong suốt
Đây là một số văn bản được đặt trong hộp trong suốt. Đây là một số văn bản được đặt trong hộp trong suốt. Đây là một số văn bản được đặt trong hộp trong suốt. Đây là một số văn bản được đặt trong hộp trong suốt.Đây là một số văn bản được đặt trong hộp trong suốt.
Mã nguồn trông như thế này:
<html>
<head>
<style>
div.background
{
width:500px;
height:250px;
background:url(klematis.jpg) repeat;
border:2px solid black;
}
div.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
margin:30px 40px;
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.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>
</body>
</html>
<head>
<style>
div.background
{
width:500px;
height:250px;
background:url(klematis.jpg) repeat;
border:2px solid black;
}
div.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
margin:30px 40px;
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.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>
</body>
</html>
Đầu tiên, chúng ta tạo ra một phần tử div (class = "nền") với chiều cao và chiều rộng cố định, một hình nền, và một biên giới. Sau đó chúng tôi tạo ra một div nhỏ hơn (class = "transbox") bên trong phần tử div đầu tiên. Các "transbox" div có chiều rộng cố định, một màu nền, và là biên giới - và nó là minh bạch. Bên trong div minh bạch, chúng ta thêm một số văn bản bên trong phần tử ap.
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét