Cách làm màu nền div trong suốt trong CSS

Tôi không sử dụng CSS3. Vì vậy, tôi không thể sử dụng opacityhoặc filterthuộc tính. Không sử dụng các thuộc tính này, làm thế nào tôi có thể làm cho background-colorminh bạch của a div? Nó phải là loại ví dụ hộp văn bản trong liên kết này . Ở đây màu nền hộp văn bản là trong suốt. Tôi muốn làm như vậy, nhưng không sử dụng các thuộc tính được đề cập ở trên.

Độ mờ cho bạn độ trong suốt hoặc trong suốt. Xem một ví dụ Fiddle ở đây .

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";       /* IE 8 */
filter: alpha(opacity=50);  /* IE 5-7 */
-moz-opacity: 0.5;          /* Netscape */
-khtml-opacity: 0.5;        /* Safari 1.x */
opacity: 0.5;               /* Good browsers */

Lưu ý: đây không phải là thuộc tính CSS3

Xem http://css-tricks.com/snippets/css/cross-browser-opacity/

Vấn đề opacitylà nó cũng sẽ ảnh hưởng đến nội dung, khi bạn không muốn điều này xảy ra.

Nếu bạn chỉ muốn phần tử của mình trong suốt, điều đó thực sự dễ dàng như:

background-color: transparent;

Nhưng nếu bạn muốn nó có màu, bạn có thể sử dụng:

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

Hoặc xác định một hình ảnh nền ( 1pxbởi 1px) được lưu với bên phải alpha.
(Để làm như vậy, sử dụng Gimp, Paint.Nethoặc bất kỳ phần mềm hình ảnh khác cho phép bạn làm điều đó.
Chỉ cần tạo một hình ảnh mới, xóa nền và đặt một màu bán trong suốt trong nó, sau đó lưu nó trong png).

Như đã nói bởi René , điều tốt nhất để làm là nên kết hợp cả hai, với sự rgbađầu tiên và 1pxbằng 1pxhình ảnh như một dự phòng nếu trình duyệt không hỗ trợ alpha:

background: url('img/red_transparent_background.png');
background: rgba(255, 0, 0, 0.4);

Xem thêm : http://www.w3schools.com/cssref/css_colors_legal.asp .

Bản trình diễn : JSFiddle của tôi

trong suốt là mặc định cho màu nền

http://www.w3schools.com/cssref/pr_background-color.asp

Từ https://developer.mozilla.org/en-US/docs/Web/CSS/background-color

Để đặt màu nền:

/* Hexadecimal value with color and 100% transparency*/
background-color: #11ffee00;  /* Fully transparent */

/* Special keyword values */
background-color: transparent;

/* HSL value with color and 100% transparency*/
background-color: hsla(50, 33%, 25%, 1.00);  /* 100% transparent */

/* RGB value with color and 100% transparency*/
background-color: rgba(117, 190, 218, 1.0);  /* 100% transparent */

Nó có thể là một chút muộn để thảo luận nhưng chắc chắn ai đó sẽ vấp vào bài đăng này như tôi đã làm. Tôi đã tìm thấy câu trả lời mà tôi đang tìm kiếm và nghĩ rằng tôi sẽ tự mình đăng lên. JSfiddle sau đây bao gồm cách tạo lớp .PNG với độ trong suốt. Việc Jerska đề cập đến thuộc tính trong suốt cho CSS của div là giải pháp: http://jsfiddle.net/jyef3fqr/

HTML:

   <button id="toggle-box">toggle</button>
   <div id="box" style="display:none;" ><img src="x"></div>
   <button id="toggle-box2">toggle</button>
   <div id="box2" style="display:none;"><img src="xx"></div>
   <button id="toggle-box3">toggle</button>
   <div id="box3" style="display:none;" ><img src="xxx"></div>

CSS:

#box {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:1;
}
#box2 {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:2;
background-color : transparent;
      }
      #box3 {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:2;
background-color : transparent;
      }
 body {background-color:#c0c0c0; }

JS:

$('#toggle-box').click().toggle(function() {
$('#box').animate({ width: 'show' });
}, function() {
$('#box').animate({ width: 'hide' });
});

$('#toggle-box2').click().toggle(function() {
$('#box2').animate({ width: 'show' });
}, function() {
$('#box2').animate({ width: 'hide' });
});
$('#toggle-box3').click().toggle(function() {
$('#box3').animate({ width: 'show' });
 }, function() {
$('#box3').animate({ width: 'hide' });
});

Và nguồn cảm hứng ban đầu của tôi: http://jsfiddle.net/5g1zwLe3/ Tôi cũng đã sử dụng paint.net để tạo ra các PNG trong suốt, hay đúng hơn là các PNG với BG trong suốt.

    /*Fully Opaque*/
    .class-name {
      opacity:1.0;
    }

    /*Translucent*/
    .class-name {
      opacity:0.5;
    }

    /*Transparent*/
    .class-name {
      opacity:0;
    }

    /*or you can use a transparent rgba value like this*/
    .class-name{
      background-color: rgba(255, 242, 0, 0.7);
      }

    /*Note - Opacity value can be anything between 0 to 1;
    Eg(0.1,0.8)etc */