CSS'de div arka plan rengini saydam yapma

CSS3 kullanmıyorum. Bu yüzden opacityveya filterözelliklerini kullanamıyorum . Bu öznitelikleri kullanmadan a'nın background-colorsaydamlığını nasıl yapabilirim div? Bu bağlantıda bir tür metin kutusu örneği olmalıdır . Burada metin kutusu arka plan rengi şeffaftır. Aynı şeyi yapmak istiyorum, ancak yukarıda belirtilen özellikleri kullanmadan.

Opaklık, yarı saydamlık veya şeffaflık sağlar. Burada bir Fiddle örneğine bakın .

-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 */

Not: bunlar CSS3 özellikleri DEĞİLDİR

Bkz. Http://css-tricks.com/snippets/css/cross-browser-opacity/

Sorun opacity, bunun olmasını istemediğinizde içeriği de etkileyeceğidir.

Sadece öğenizin şeffaf olmasını istiyorsanız, gerçekten de bu kadar kolay:

background-color: transparent;

Ancak renkte olmasını istiyorsanız şunları kullanabilirsiniz:

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

Veya sağ ile kaydedilmiş bir arka plan resmi ( 1pxtarafından 1px) tanımlayın alpha.
(Bunu yapmak için Gimp, Paint.Netveya bunu yapmanıza izin veren başka bir görüntü yazılımı kullanın.
Sadece yeni bir görüntü oluşturun, arka planı silin ve içine yarı saydam bir renk koyun, sonra png'ye kaydedin.)

Tarafından söylediği gibi René , yapılacak en iyi şey ile, hem karıştırmak olacaktır rgbabirinci ve 1pxtarafından 1pxtarayıcı alfa desteklemiyorsa yedek olarak görüntüye:

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

Ayrıca bkz : http://www.w3schools.com/cssref/css_colors_legal.asp .

Demo : JSFiddle'ım

şeffaf , arka plan rengi için varsayılan değerdir

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

Gönderen https://developer.mozilla.org/en-US/docs/Web/CSS/background-color

Arka plan rengini ayarlamak için:

/* 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 */

Tartışmaya biraz geç kalmış olabilir ama kaçınılmaz olarak biri benim gibi bu yayına rastlayacak. Aradığım cevabı buldum ve kendi cevaplarımı yayınlayacağımı düşündüm. Aşağıdaki JSfiddle, şeffaflık ile .PNG'lerin nasıl katmanlanacağını içerir. Jerska'nın div'ın CSS'si için şeffaflık özelliğinden bahsedilmesi çözümdü: 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' });
});

Ve benim asıl ilham kaynağım: http://jsfiddle.net/5g1zwLe3/ Ayrıca şeffaf PNG'leri veya şeffaf BG'leri olan PNG'leri oluşturmak için paint.net'i de kullandım.

    /*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 */