CSS Độ mờ

0
19

Độ mờ hình ảnh

Thuộc tính opacity có thể có giá trị từ 0,0 – 1,0. Giá trị càng thấp, ảnh càng mờ:

img {
  opacity: 0.5;
}

Hiệu ứng Di chuột trong suốt

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

img {
  opacity: 0.5;
}

img:hover {
  opacity: 1.0;
}

Hộp trong suốt

Khi sử dụng thuộc tính opacity để thêm độ trong suốt vào nền của một phần tử, tất cả các phần tử 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 phần tử hoàn toàn trong suốt khó đọc:

div {
  opacity: 0.3;
}

Transparency using RGBA

Nếu bạn không muốn áp dụng độ mờ cho các phần tử 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 văn bản:

Giá trị màu RGBA được chỉ định bằng: rgba(red, green, blue, alpha). Tham số alpha là một số từ 0,0 (hoàn toàn trong suốt) đến 1,0 (hoàn toàn không trong suốt).

div {
  background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */
}

Text in Transparent Box

<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;
}

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>

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây