Làm thế nào để làm cho DIV nền chỉ minh bạch sử dụng CSS

Question

Tôi đang sử dụng attrubutes CSS:

filter: alpha(opacity=90);  

opacity: 0,9;

để làm DIV trong suốt, nhưng khi tôi thêm một DIV khác trong DIV này, nó cũng làm cho nó trong suốt.

Tôi muốn làm cho bên ngoài (nền) DIV chỉ trong suốt. Làm sao ?

Answer 1

Fiddle: http://jsfiddle.net/uenrX/1/

Thuộc tính Opacity của DIV bên ngoài không thể được hoàn tác bằng DIV bên trong. Nếu bạn muốn đạt được tính minh bạch, sử dụng rgba hoặc hsla:

div Outer:

background-color: rgba(255, 255, 255, 0.9); /* Color white with alpha 0.9*/ 

div Nội:

background-color: #FFF; /* Background white, to override the background propery*/ 

EDIT
Bởi vì bạn đã thêm filter:alpha(opacity=90) cho câu hỏi của bạn , Tôi cho rằng bạn cũng muốn có một giải pháp làm việc cho (phiên bản cũ hơn) của IE. Điều này sẽ làm việc (-ms- tiền tố cho các phiên bản mới nhất của trình duyệt IE):

/*Padded for readability, you can write the following at one line:*/ 
filter: progid:DXImageTransform.Microsoft.Gradient(
    GradientType=1, 
    startColorStr="#E6FFFFFF", 
    endColorStr="#E6FFFFFF"); 

/*Similarly: */ 
filter: progid:DXImageTransform.Microsoft.Gradient(
    GradientType=1, 
    startColorStr="#E6FFFFFF", 
    endColorStr="#E6FFFFFF"); 

Tôi đã sử dụng các bộ lọc Gradient, bắt đầu với cùng start- và end-color, do đó nền không hiển thị một gradient, nhưng một màu phẳng. Định dạng màu có định dạng hex ARGB. Tôi đã viết một đoạn mã JavaScript để chuyển đổi các giá trị độ mờ tương đối thành các giá trị alpha-hex tuyệt đối:

var opacity = .9; 
var A_ofARGB = Math.round(opacity * 255).toString(16); 
if(A_ofARGB.length == 1) A_ofARGB = "0"+a_ofARGB; 
else if(!A_ofARGB.length) A_ofARGB = "00"; 
alert(A_ofARGB); 

Answer 2

Không thể, độ mờ được thừa kế bởi các nút con và bạn không thể tránh điều này. Để chỉ có cha mẹ trong suốt, bạn phải chơi với vị trí (tuyệt đối) của các phần tử và chỉ số z của chúng

Answer 3

Tôi không biết điều này có thay đổi hay không. Nhưng từ kinh nghiệm của tôi. các phần tử lồng nhau có độ mờ tối đa bằng với các người cha.

Mà có nghĩa là:

<div id="a"> 
<div id="b"> 
</div></div> 

Div#a has 0.6 opacity 
div#b has 1 opacity 

Có #b nằm trong #A thì đó là độ mờ đục tối đa luôn được 0.6

Nếu #b sẽ có 0,5 opacity. Trong thực tế nó sẽ là 0,6 * 0,5 == 0,3 opacity

Answer 4

Tôi đã có cùng một vấn đề, đây là giải pháp tôi đã đưa ra, đó là dễ dàng hơn nhiều!

Tạo một chút 1px x 1px hình ảnh trong suốt và lưu dưới dạng tệp .png.

Trong CSS cho DIV của bạn, sử dụng mã này:

background:transparent url('/images/trans-bg.png') repeat center top; 

Hãy nhớ để thay đổi đường dẫn tập tin hình ảnh trong suốt của bạn.

Tôi nghĩ giải pháp này hoạt động trong tất cả các trình duyệt, có thể ngoại trừ IE 6, nhưng tôi chưa thử nghiệm.

Answer 5

.modalBackground 
    { 

     filter: alpha(opacity=80); 
     opacity: 0.8; 
     z-index: 10000; 
    } 

Answer 6

background-image:url('image/img2.jpg'); 
background-repeat:repeat-x; 

Sử dụng một số hình ảnh cho hình ảnh nội bộ và sử dụng này.

Answer 7

Chỉ cần không bao gồm màu nền cho div đó và nó sẽ trong suốt.

Answer 8

<div id="divmobile" style="position: fixed; background-color: transparent; 
    z-index: 1; bottom:5%; right: 0px; width: 50px; text-align:center;" class="div-mobile">