Làm cách nào để thay đổi độ mờ của nền mà không ảnh hưởng đến CSS của văn bản?

Để cải thiện thiết kế của trang web, người thiết kế trang web sử dụng thuộc tính độ mờ để chỉ định độ mờ/độ trong suốt của một mục khi họ cần

Nội dung chính Show

Thay đổi độ mờ của hình nền trong CSS mà không ảnh hưởng đến văn bản
Hiệu ứng di chuột trong suốt
Làm cách nào để thay đổi độ mờ của hình nền mà không ảnh hưởng đến CSS văn bản?
Làm cách nào để ghi đè CSS độ mờ?
Làm cách nào chúng ta có thể ngăn độ mờ ảnh hưởng đến các phần tử con?

Chúng ta có thể thêm thuộc tính độ mờ vào ảnh nền hoặc màu như.
Kiểu bên trong - bằng cách sử dụng phần tử
Kiểu bên ngoài - bằng cách sử dụng tệp CSS bên ngoài làm kiểu. css
Inline - bằng cách sử dụng thuộc tính style trong phần tử HTML

Cú pháp.

Cú pháp. CSS nội bộ & bên ngoài.

bộ chọn { độ mờ. giá trị;

CSS nội tuyến

Văn bản của bạn ở đây

Ghi chú. thay vào đó hãy sử dụng CSS bên ngoài

Thí dụ. độ mờ của hình nền mà không ảnh hưởng đến văn bản, độ dốc màu

độ mờ 0. 2

độ mờ 0. 5

độ mờ 1 (mặc định)

Ghi chú. "background-opacity" - Nền của phần tử CSS mà không ảnh hưởng đến các phần tử con.

Hỗ trợ trình duyệt

Phần tử

Chrome

Firefox

Opera

Safariopacity propertyYesYesYesYesYes

Thay đổi độ mờ của hình nền trong CSS mà không ảnh hưởng đến văn bản

Làm cách nào bạn có thể thay đổi độ mờ của hình nền trong CSS?

Thuộc tính CSS nền-độ mờ bạn chỉ muốn sử dụng để thay đổi độ mờ hoặc độ trong suốt của nền của phần tử CSS mà không ảnh hưởng đến mục con, không có

Thí dụ

<!DOCTYPE html>

  <html>

  <head>

  <style>

  .main-box{

  width:99%;

  height:200px;

  background:#E9E9E9;

  }

  .box1{

  background-image: url('https://www.agernic.com/uploads/image-opacity.jpg');

  opacity: 0.2;

  margin: 10px;

  padding: 2px;

  font-size:30px;

  height: 160px;

  width:27%; 

  float: left;

  }

  .box2{

  background-image: url('https://www.agernic.com/uploads/image-opacity.jpg');

  opacity: 0.5;

  margin: 10px;

  padding: 2px;

  font-size: 30px;

  height:160px;

  width:27%;

  float: left;
}

  .box3{

  background-image: url('https://www.agernic.com/uploads/image-opacity.jpg');

  margin: 10px;

  padding: 2px;

  font-size: 30px;

  height: 160px;

  width:27%;

  float: left;

  }

  </style>

  </head>
<body>

  <div class="main-box">

  <div class="box1">opacity 0.2</div>

  <div class="box2">opacity 0.5</div>

  <div class="box3">opacity 1 (default)</div>

  </div>

  </body>

  </html>

Các chủ đề liên quan.
Kích thước hình nền vừa với màn hình Kích thước hình ảnh Hình ảnh có góc bo tròn

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

Độ trong suốt của hình ảnh

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

<!DOCTYPE html>

  <html>

  <head>

  <style>

  img {

  opacity: 0.5;

  }

img:hover {

opacity: 1.0;

}

</style>

</head>

<body>
<h1>Image Transparency</h1>

<p>The opacity property is often used in conjunction with the :hover selector to change the opacity on mouseover.</p>

<img src="https://www.agernic.com/uploads/image-opacity.jpg" alt="mountin" width="30%">

<img src="https://www.agernic.com/uploads/landscape_beach.jpg" alt="landscape beach" width="30%">

<img src="https://www.agernic.com/uploads/espana-imagenes.jpg" alt="Italy" width="30%">
</body>

</html>

Thẻ. độ mờ mà không ảnh hưởng đến văn bản, chỉ, độ dốc, màu đen, màu, tối hơn, rgba, Làm cách nào để làm cho hình nền sáng hơn?

Minh bạch sử dụng RGBA

Nếu bạn không muốn áp dụng độ mờ cho các mục như trong ví dụ hiển thị ở trên, bạn có thể sử dụng các giá trị màu RGBA. Ví dụ tiếp theo đặt độ mờ/độ trong suốt cho màu nền

Thí dụ

<!DOCTYPE html>

  <html>

  <head>

  <style>

  div {

  background: rgb(0, 0, 255);

  padding: 10px;

  }
div.fi {

  background: rgba(0, 0, 255, 0.2);

  }
div.se {

  background: rgba(0, 0, 255, 0.4);

  }
div.th {

  background: rgba(0, 0, 255, 0.6);

  }

  </style>

  </head>

  <body>
<p>Transparent Box With RGBA color values:</p>

  <div class="fi"><p>20% opacity</p></div>

  <div class="se"><p>40% opacity</p></div>

  <div class="th">

  <p>60% opacity</p></div>

  <div><p>default</p></div>


</body>

  </html>

Giá trị của một màu trong mã RGBA được chỉ định bằng. rgba (đỏ, lục, lam, beta). Tham số beta là một số nằm trong khoảng từ 0. 0 (hoàn toàn trong suốt) và 1. 0 (hoàn toàn mờ đục)

Làm cách nào để thay đổi độ mờ của hình nền mà không ảnh hưởng đến CSS văn bản?

Tỷ lệ phần trăm độ mờ được tính là Độ mờ% = Độ mờ * 100 Để chỉ đặt độ mờ cho nền chứ không phải văn bản bên trong nó. Có thể đặt giá trị này bằng cách sử dụng các giá trị màu RGBA thay vì thuộc tính độ mờ vì sử dụng thuộc tính độ mờ có thể làm cho văn bản bên trong phần tử đó hoàn toàn trong suốt.

Làm cách nào để ghi đè CSS độ mờ?

Đối với hình ảnh làm nền, bạn có thể giả mạo độ mờ bằng cách sử dụng màu nền chính trong rgba. nếu bạn muốn độ mờ bằng 0. 3 cho nền, sau đó làm 1 -0. 3 = 0. 7 để đặt độ mờ rgba của bạn .