NTM Solutions

Thứ Bảy, 21 tháng 4, 2018

Tự học CSS - Bài 26 - Thuộc tính trong suốt opacity và transparency


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 */
}

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 */
}
Ví dụ 2: tạo chiếc hộp trong suốt
div {
    opacity
: 0.3;
    filter
: alpha(opacity=30); /* For IE8 and earlier */
}

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 */
}
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>

Nếu còn thắc mắc các bạn xem thêm video clip sau:

Nguồn: Lớp học vi tính .COM