Đặt màu thông qua rgba trong CSS

Ngoài định dạng rgb còn có định dạng rgba, hoạt động theo cách tương tự, nhưng tham số thứ tư cho phép đặt độ trong suốt cho màu. Tham số này nhận các giá trị thập phân từ 0 đến 1. Trong đó, giá trị một tương ứng với độ mờ đục hoàn toàn, còn giá trị không - với độ trong suốt hoàn toàn.

Hãy xem các ví dụ.

Ví dụ

Đầu tiên, hãy tạo một khối không trong suốt như thế này:

html<div id="parent">
  <div id="elem">
    Lorem ipsum dolor sit amet.
  </div>
</div>

css#parent {
  background-image: url("bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  display: inline-block;
  padding: 30px;
}
#elem {
  width: 300px;
  height: 200px;
  border: 20px solid red;
  padding: 10px;
  font-size: 50px;
  font-weight: bold;
  color: rgba(255, 0, 0); /* màu đỏ */
}

Результат:

Ví dụ

Bây giờ hãy thêm độ trong suốt một phần cho văn bản:

html<div id="parent">
  <div id="elem">
    Lorem ipsum dolor sit amet.
  </div>
</div>

css#parent {
  background-image: url("bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  display: inline-block;
  padding: 30px;
}
#elem {
  width: 300px;
  height: 200px;
  border: 20px solid red;
  padding: 10px;
  font-size: 50px;
  font-weight: bold;
  color: rgba(255, 0, 0, 0.5); /* màu đỏ trong suốt một phần */
}

Результат:

Ví dụ

Và bây giờ hãy tạo đường viền trong suốt một phần:

html<div id="parent">
  <div id="elem">
    Lorem ipsum dolor sit amet.
  </div>
</div>

css#parent {
  background-image: url("bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  display: inline-block;
  padding: 30px;
}
#elem {
  width: 300px;
  height: 200px;
  border: 20px solid rgba(255, 0, 0, 0.5); /* màu đỏ trong suốt một phần */
  padding: 10px;
  font-size: 50px;
  font-weight: bold;
  color: red;
}

Результат:

Ví dụ

Và bây giờ hãy tạo nền trong suốt một phần:

html<div id="parent">
  <div id="elem">
    Lorem ipsum dolor sit amet.
  </div>
</div>

css#parent {
  background-image: url("bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  display: inline-block;
  padding: 30px;
}
#elem {
  width: 300px;
  height: 200px;
  border: 20px solid red;
  background-color: rgba(0, 0, 0, 0.4); /* màu đen trong suốt một phần */
  padding: 10px;
  font-size: 50px;
  font-weight: bold;
  color: red;
}

Результат:

Bài tập thực hành