Jak ustawić przezroczysty kolor tła div w CSS


191

Nie używam CSS3. Więc nie mogę użyć opacityani filteratrybutów. Bez korzystania z tych atrybutów, jak mogę uczynić background-colorprzezroczystym div? Powinien to być przykład pola tekstowego w tym linku . Tutaj kolor tła pola tekstowego jest przezroczysty. Chcę zrobić to samo, ale bez używania wyżej wymienionych atrybutów.


3
Ani opacityteż nie filtersą atrybuty CSS 3. Jak myślisz, dlaczego nie możesz ich użyć?
Pekka

Nie wiem, w moim Eclipse Juno oba atrybuty nie są wyświetlane i zgodnie z W3School: Uwaga: Właściwość krycia CSS jest częścią zalecenia W3C CSS3. Zobacz tutaj
Mistu4u,

A Moje zaćmienie nie obsługuje (najprawdopodobniej) CSS3 !! :(
Mistu4u,

1
Powiedziałbym, że możesz zignorować te wiadomości. Niektóre atrybuty są poza specyfikacjami, ale nadal można je stosować w prawdziwym świecie. Połączenie opacity, filtera niektóre inne atrybuty jak pokazano poniżej: css-tricks.com/css-transparency-settings-for-all-broswers obejmie prawie każda przeglądarka jest
Pekka

Odpowiedzi:


140

Krycie daje przezroczystość lub przezroczystość. Zobacz przykład Fiddle tutaj .

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

Uwaga: to NIE są właściwości CSS3

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


1
„Więc nie mogę używać atrybutów krycia ani filtrowania”
Jerska

4
@Jerska to przesłanka, która wymaga jednak przesłuchania. Jedynym powodem, dla którego nie używa tych atrybutów, wydaje się być to, że jego IDE narzeka na nie
Pekka

Czy jest więc jakiś inny sposób, aby to osiągnąć?
Mistu4u,

@Subir, jeśli potrzebujesz innego sposobu, zobacz odpowiedź Jerski. Ale jak już wspomniano, wydaje się wątpliwe, dlaczego chcesz tego uniknąć opacity.
Pekka

11
Plakat chciał mieć nieprzezroczyste tło, a nie nieprzejrzysty element. Tekst w elemencie będzie również nieprzezroczysty przy użyciu metody krycia. Ta odpowiedź nie jest wystarczająco kompletna, aby to zapewnić. Korzystanie z rgba z rezerwowym png byłoby znacznie lepsze.
René,

351

Problem opacitypolega na tym, że wpłynie to również na treść, gdy często nie chcesz, aby tak się stało.

Jeśli chcesz, aby Twój element był przezroczysty, to naprawdę tak proste, jak:

background-color: transparent;

Ale jeśli chcesz, aby był w kolorach, możesz użyć:

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

Lub zdefiniuj obraz tła ( 1pxwg 1px) zapisany z prawej strony alpha.
(Aby to zrobić, użyj Gimp, Paint.Netlub jakiegokolwiek innego programu graficznego, który pozwala, aby to zrobić.
Wystarczy utworzyć nowy obraz, należy usunąć tło i umieścić półprzezroczyste kolor w nim, a następnie zapisać go w png).

Jak powiedział przez René , najlepszym rozwiązaniem byłoby, aby wymieszać obie, przy czym rgbapierwsza i 1pxprzez 1pxobraz jako awaryjnej, jeśli przeglądarka nie obsługuje alpha:

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

Zobacz także : http://www.w3schools.com/cssref/css_colors_legal.asp .

Demo : Mój JSFiddle


3
Również wpisany jako komentarz przy innej odpowiedzi. Najmilszą rzeczą byłoby użycie kolorowania rgba i opisanego png w tej odpowiedzi jako rezerwowej.
René,

2
Zła prostota użycia „przezroczystego” atrybutu koloru tła. Mega kudos!
tfont


4

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

Aby ustawić kolor tła:

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

2

Może być trochę za późno na dyskusję, ale nieuchronnie ktoś trafi na ten post tak jak ja. Znalazłem odpowiedź, której szukałem i pomyślałem, że opublikuję własne zdanie na jej temat. Następujący JSfiddle zawiera informacje na temat warstw .PNG z przezroczystością. Wspomnienie Jerski o atrybucie przezroczystości dla CSS div było rozwiązaniem: 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' });
});

I moja oryginalna inspiracja: http://jsfiddle.net/5g1zwLe3/ Użyłem również paint.net do tworzenia przezroczystych plików PNG, a raczej plików PNG z przezroczystymi BG.


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

Podaj wyjaśnienie swojej odpowiedzi i unikaj publikowania tylko kodów.
Saeed Zhiany,
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.