Màu nền CSS trong suốt

Lê Lam Ngọc·05:58 25/06/2012

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?

Màu nền CSS trong suốt

Đặng Minh Hương·06:00 25/06/2012

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/

Trịnh Nam Tú·22:13 23/10/2014

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;

 

Trần Hồng Thịnh

Trần Hồng Thịnh·06:00 25/06/2012

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
}

 

Trần Bích Hạnh·07:47 19/08/2017

Đâ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)
Trịnh Ánh Linh·00:27 23/11/2013

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

Lê Ngọc Anh·20:39 12/10/2019

Để đạ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ư rgbahsla , 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:

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

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ã

Màu nền CSS trong suốt
Ngô Diệu Hạnh·06:06 25/06/2012

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

 

Hoàng Thiện Giang·20:14 12/10/2019

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

.someDive{
background:transparent
}