CSS Opacity

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    8 thg 11, 2022

  • Số lượt xem

    280 lượt xem


CSS Opacity là thuộc tính chỉ định độ mờ đục / trong suốt của một element.

Transparent Image

Thuộc tính opacity có thể có giá trị từ 0.0 - 1.0. Giá trị càng thấp, càng mờ:

Forest

opacity 0.2

Forest

opacity 0.5

Forest

opacity 1
(mặc định)

img {    opacity: 0.5;  }

 

Transparent Hover Effect

Thuộc tính opacity thường được sử dụng cùng với :hover để thay đổi độ mờ khi di chuột qua.

img {    opacity: 0.5;  }    img:hover {    opacity: 1.0;  }

 

Transparent Box

Khi sử dụng thuộc tính opacity để thêm độ trong suốt vào nền của một element, tất cả các element con của nó sẽ thừa hưởng cùng một độ trong suốt. Điều này có thể làm cho văn bản bên trong một element hoàn toàn trong suốt khó đọc:

opacity 1

opacity 0.6

opacity 0.3

opacity 0.1

 

div {    opacity: 0.3;  }

 

Transparency sử dụng RGBA

Nếu bạn không muốn áp dụng độ mờ cho các element con, như trong ví dụ của chúng tôi ở trên, hãy sử dụng các giá trị màu RGBA. Ví dụ sau đặt độ mờ cho màu nền chứ không phải cho văn bản:

100% opacity

60% opacity

30% opacity

10% opacity

 

div {    background: rgba(76, 175, 80, 0.3) /* Màu nền xanh với 30% opacity */  }

 

Text in Transparent Box

Đây là một số văn bản bên trong  transparent box.

<html>  <head>  <style>  div.background {    background: url(klematis.jpg) repeat;    border: 2px solid black;  }    div.transbox {    margin: 30px auto;    background-color: #ffffff;    border: 1px solid black;    opacity: 0.6;  }    div.transbox p {    margin: 5%;    font-weight: bold;    color: #000000;  }  </style>  </head>  <body>    <div class="background">    <div class="transbox">      <p>Đây là một số văn bản bên trong  transparent box.</p>    </div>  </div>    </body>  </html>

Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về CSS

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.