2 tháng 10, 2019

Thuộc tính Opacity trong CSS

Thuộc tính Opacity trong CSS

Thuộc tính Opacity dùng để quy định độ trong suốt cho phần tử html

Giá trị của opacity gồm:
Giá trị
Mô tả
Từ 0 đến 1 Tương ứng với từ 0% đến 100%. Chỉ số càng cao thì độ trong suốt càng thấp
inherit Thừa hưởng thuộc tính từ phần tử html cha

Ví dụ thực hành

File HTML
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title> ví dụ </title>
    <link type="text/css" rel="stylesheet" href="./opacity.css" />
  </head>

  <body>
  
    <div id="hinhvang" note="hình chữ nhật màu vàng">
        <div id="hinhdo" note="hình chữ nhật màu đỏ"></div>
    </div>
    
    <div id="hinhxanh" note="hình chữ nhật màu xanh">
        <div id="hinhdo" note="hình chữ nhật màu đỏ"></div>
    </div>  

  </body>
</html>

File CSS
@charset "utf-8";

#hinhvang{
    width: 200px;
    height: 500px;
    background-color: yellow;
    position: absolute;
    left: 100px;
    top: 100px;
    z-index: 5;
}

#hinhxanh{
    width: 200px;
    height: 500px;
    background-color: blue;
    position: absolute;
    left: 500px;
    top: 100px;
    z-index: 10;
}


#hinhdo{
    width: 200px;
    height: 150px;
    background-color: red;
    position: absolute;
    opacity: 0.4;
    left: 100px;
    top: 100px;
    z-index: 15;
}

Kết quả hiển thị: 
Thuộc tính Opacity trong CSS

Lưu ý
- Thuộc tính opacity hỗ trợ trong đa số các trình duyệt.
- Đối với trình duyệt IE8 trở xuống, phải sử dụng thuộc tính filter: filter:Alpha(opacity=60).



SHARE THIS

Blogger Nguyễn Dương

Có một câu nói mà mình rất thích đó là "Thật sai lầm khi nghĩ rằng một khi rời khỏi trường học, bạn không cần học thêm điều mới nữa". Chính vì thế mà hãy luôn luôn học hỏi, con người chỉ ngừng phát triển khi ngừng học hỏi. Nếu như bạn chưa hiểu nội dung bài viết hoặc đang khúc mắc khi thao tác thì hãy bình luận phía dưới bài viết để mọi người cùng thảo luận nhé!