HTML/CSS | Thuộc tính opacity

Học HTML, CSS từ Zero Tới Hero

• Tổng quan về thuộc tính opacity
• Các loại giá trị
• Tính chất

Tổng quan về thuộc tính opacity

Trong CSS, opacity là thuộc tính dùng để điều chỉnh độ trong suốt của phần tử HTML. Nói cách khác là quy định độ mờ của phần tử, cho phép điều chỉnh mức độ hiển thị của phần tử từ hoàn toàn trong suốt đến mờ hoàn toàn.

Cú pháp:

div {
    opacity: 0.5;
}

Ví dụ về hình ảnh có sử dụng opacity:

<img src="https://files.fullstack.edu.vn/f8-prod/manual_uploads/deer.png" alt="" class="icon icon1">
<img src="https://files.fullstack.edu.vn/f8-prod/manual_uploads/deer.png" alt="" class="icon icon2">

<style>
.icon {
    width: 200px;
    height: 200px;
    border-radius: 8px;
}
.icon2{
    border-radius: 8px;
    opacity: 0.5;
}
</style>

Quan sát thấy, hình ảnh chú tuần lộc có sử dụng thuộc tính opacity mờ hẳn đi so với hình ảnh còn lại. Khi làm dự án thực tế, tùy theo yêu cầu, nghiệp vụ để chỉnh độ mờ phù hợp.

Các loại giá trị

Thuộc tính opacity có thể sử dụng 2 loại giá trị:

• Giá trị số: 0.0 - 1.0
• Giá trị %: 0 - 100%

Sử dụng giá trị số hay giá trị % đều cho ra kết quả giống nhau vì giá trị mỗi loại đều tương ứng nhau.

Ví dụ:

• 0.5 tương ứng 50%
• 1 tương ứng với 100%

Tính chất

Giá trị thuộc tính opacity tỉ lệ thuận với độ trong suốt của phần tử. Giá trị càng lớn, phần tử càng được nhìn thấy rõ. Ngược lại, nếu giá trị là 0, người dùng sẽ không thể nhìn thấy phần tử nữa.

Khi set opacity: 0, phần tử sẽ bị mờ hoàn toàn, người dùng không thể nhìn thấy phần tử, nhưng phần tử đó vẫn chiếm không gian trên trang web.

Phân biệt display: none và opacity: 0:

Giá trị	Giải thích
display: none	Phần tử sẽ được ẩn đi và không chiếm không gian ở trên trang web nữa.
opacity: 0	Phần tử vẫn chiếm không gian trên trang web nhưng không thể nhìn thấy vì đã bị mờ hoàn toàn.

Khi set opacity cho một thẻ, các thành phần thuộc thẻ đó đều sẽ bị mờ đi, ví dụ: màu nền, ảnh nền, văn bản, v.v và có thể nhìn xuyên qua các phần tử khác.

Ví dụ:

<style>
#div{
  height:300px;
  background-color:#FFFFFF;
}

#orange {
  border: 1px solid black;
  background-color: orange;
  width: 200px;
  height: 100px;
  position: relative;
  top: 80px;
  left: 20px;
  padding: 20px;
}
#blue {
  border: 1px solid black;
  position: relative;
  left: 50px;
  padding: 20px;
  background-color: lightblue;
  width: 200px;
  height: 100px;
  opacity: 0.3;
}
</style>

<div id="div">
  <div id="orange">Thẻ div màu cam</div>
  <div id="blue">Thẻ div màu xanh</div>
</div>

Thẻ div màu cam

Thẻ div màu xanh

Tóm tắt

• Trong CSS, opacity là thuộc tính dùng để điều chỉnh độ trong suốt của phần tử HTML.
• Thuộc tính opacity có thể sử dụng 2 loại giá trị:
  • Giá trị số: 0.0 - 1.0
  • Giá trị %: 0 - 100%
• Giá trị thuộc tính opacity tỉ lệ thuận với độ trong suốt của phần tử đó. Giá trị càng lớn, phần tử càng được nhìn thấy rõ.
• Khi set opacity cho một phần tử, các thành phần thuộc phần tử đó đều sẽ bị mờ đi: màu nền, ảnh nền, văn bản, v.v và có thể nhìn xuyên qua các phần tử khác.