Màu nền CSS trong suốt

Tôi muốn làm cho nền của menu danh sách biến mất bằng cách sử dụng độ mờ mà không ảnh hưởng đến phông chữ. Có thể với CSS3 không?

bây giờ bạn có thể sử dụng rgba trong các thuộc tính CSS như sau:

.class {
    background: rgba(0,0,0,0.5);
}

0,5 là độ trong suốt , thay đổi các giá trị theo thiết kế của bạn.

Bản demo trực tiếp http://jsfiddle.net/EeAaB/

thêm thông tin http://css-tricks.com/rgba-browser-support/

Hãy ghi nhớ ba tùy chọn này (bạn muốn # 3):

1) Toàn bộ phần tử là trong suốt:

visibility: hidden;

2) Toàn bộ phần tử hơi trong suốt:

opacity: 0.0 - 1.0;

3) Chỉ nền của phần tử là trong suốt:

background-color: transparent;

vâng, điều đó có thể. chỉ cần sử dụng cú pháp rgba cho màu nền của bạn.

.menue{
  background-color: rgba(255, 0, 0, 0.5); //semi-transparent red
}

Đây là một lớp mẫu sử dụng CSS có tên là màu:

.semi-transparent {
  background: yellow;
  opacity: 0.25;
}

Điều này thêm một nền có 25% mờ đục (có màu) và 75% trong suốt.

CAVEAT Thật không may, độ mờ sẽ ảnh hưởng đến toàn bộ phần tử mà nó được gắn vào.
Vì vậy, nếu bạn có văn bản trong phần tử đó, nó cũng sẽ đặt văn bản thành độ mờ 25%. :-(

Cách để vượt qua điều này là sử dụng rgbahoặc hslacác phương pháp để chỉ ra độ trong suốt như một phần của "màu" nền mong muốn của bạn. Điều này cho phép bạn chỉ định độ trong suốt của nền, độc lập với độ trong suốt của các mục khác trong phần tử của bạn.

Dưới đây là 3 cách để đặt nền xanh lam ở độ trong suốt 75% mà không ảnh hưởng đến các yếu tố khác:

• background: rgba(0%, 0%, 100%, 0.75)
• background: rgba(0, 0, 255, 0.75)
• background: hsla(240, 100%, 50%, 0.75)

Trong trường hợp background-color:rgba(0,0,0,0.5);này là cách tốt nhất. Ví dụ:background-color:rgba(0,0,0,opacity option);

Để đạt được nó, bạn phải sửa đổi background-colorphần tử.

Các cách tạo màu (bán) trong suốt:

• Tên màu CSS transparenttạo ra một màu hoàn toàn trong suốt.

  Sử dụng:

    .transparent{
      background-color: transparent;
    }
  

• Sử dụng rgbahoặc các hslachức năng màu, cho phép bạn thêm kênh alpha (độ mờ) vào các chức năng rgbvà hsl. Giá trị alpha của chúng nằm trong khoảng từ 0 - 1.

  Sử dụng:

    .semi-transparent-yellow{
      background-color: rgba(255, 255, 0, 0.5);
    }
    .transparent{
      background-color:  hsla(0, 0%, 0%, 0);
    }
  

• Bên cạnh các giải pháp đã được đề cập, bạn cũng có thể sử dụng định dạng HEX với giá trị alpha ( #RRGGBBAAhoặc #RGBAký hiệu ).

  Điều đó khá mới (có trong CSS Color Module Cấp 4), nhưng đã được triển khai trong các trình duyệt lớn hơn (xin lỗi, không có IE).

  Điều này khác với các giải pháp khác, vì điều này cũng coi kênh alpha (độ mờ) là một giá trị thập lục phân, làm cho nó nằm trong khoảng từ 0 - 255 ( FF).

  Sử dụng:

    .semi-transparent-yellow{
      background-color: #FFFF0080;
    }
    .transparent{
      background-color: #0000;
    }
  

Bạn cũng có thể thử chúng:

• transparent:

div {
  position: absolute;
  top: 50px;
  left: 100px;
  height: 100px;
  width: 200px;
  text-align: center;
  line-height: 100px;
  border: 1px dashed grey;
  
  background-color: transparent;
}

<img src="https://via.placeholder.com/200x100">
<div>
  Using `transparent`
</div>

• rgba():

div {
  position: absolute;
  top: 50px;
  left: 100px;
  height: 100px;
  width: 200px;
  text-align: center;
  line-height: 100px;
  border: 1px dashed grey;
  
  background-color: rgba(0, 255, 0, 0.3);
}

<img src="https://via.placeholder.com/200x100">
<div>
  Using `rgba()`
</div>

• #RRGGBBAA:

div {
  position: absolute;
  top: 50px;
  left: 100px;
  height: 100px;
  width: 200px;
  text-align: center;
  line-height: 100px;
  border: 1px dashed grey;
  
  background-color: #FF000060
}

<img src="https://via.placeholder.com/200x100">
<div>
  Using `#RRGGBBAA`
</div>

Thử đi:

opacity:0;

Đối với IE8 trở về trước

filter:Alpha(opacity=0); 

Bản trình diễn Opacity từ W3Schools

Có, bạn có thể chỉ cần văn bản đơn giản là

.someDive{
    background:transparent 
}