Màu nền CSS trong suốt

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

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 sau (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.

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

Điều này thêm 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%. 🙁

.semi-transparent {

background: yellow;

opacity: 0.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 hslamàu các chức năng, 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);
  	}

Kể từ Mô-đun Màu CSS Cấp 4 rgbvà hslhoạt động theo cách giống như rgbavàhsla , chấp nhận một giá trị alpha tùy chọn. Vì vậy, bây giờ bạn có thể làm điều này:

Tuy nhiên, hãy cân nhắc sử dụng các abiến thể -suffixed để được hỗ trợ nhiều hơn.

• 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 coi kênh alpha (độ mờ) cũng 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:

  Hiển thị đoạn mã

   

• hsla():

  Hiển thị đoạn mã

   

• rgb():

  Hiển thị đoạn mã

   

• #RRGGBBAA:

  Hiển thị đoạn mã

Thử cái này:

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à