css - CSS opacity på BG, men ikke på indholdet, hvordan? - Udvikleren.dk

Tags: css

<< < 1 2 3 > >>

Bruger #14791 @ 26.07.11 20:28

Hej UV´er.

Jeg har fået lavet mig nogle sorte bokse i CSS, som jeg har gjort gennemsigtige med en opacity på 60%.

Problemet er bare at alt indholdet i disse bokse også bliver gennemsigtige.
Hvordan undgår man dette?

Eksempel på CSS:

CSS kode

 .main_content {
     position:relative;
     width:762px;
     min-height:600px;
     background-color:#000000;
     border:solid 1 px #000000;
     padding:0px 5px;
     filter:alpha(opacity=60);
     opacity:0.6;
 }

Så kalder jeg den bare med en:

HTML kode

 <div clas="main_content"><p> INHOLD </p></div>

live eksempel kan ses her: www.motinf-kbg.dk

Indlæg senest redigeret d. 26.07.2011 20:29 af Bruger #14791

25 svar postet i denne tråd vises herunder
11 indlæg har modtaget i alt 21 karma

Sorter efter stemmer Sorter efter dato

Bruger #11361 @ 15.08.11 23:05

106

Jeg har lige testet lokalt..
Dette link giver en løsning som fungerer for mig.. http://acidmartin.wordpress.com/2010/11/21/using-rgba-to-prevent-the-css-opacity-inheritance-from-parent-to-child-elements/
Testet på FF og IE9, Windows 7..

Bruger #14791 @ 26.07.11 20:28

Indlæg senest redigeret d. 26.07.2011 20:29 af Bruger #14791

Bruger #14791 @ 26.07.11 20:52

Det virker sku.. tak

UPDATE:

Nå, det virker tilsyneladende ikke helt alligevel

Det virker fint i safari og firefox, men ikke i IE.

Nogen løsning for IE ?

pft

Indlæg senest redigeret d. 27.07.2011 10:24 af Bruger #14791

Bruger #14791 @ 27.07.11 20:32

Det er jeg ikke sikker på faktisk. Tror det er 7 eller 8, det er på min firma pc. Jeg bruger selv mac herhjemme, og der er som sagt ingen problemer med safari eller firefox.

Bruger #10410 @ 27.07.11 20:50

126

Du kunne lave en sort pixel i dit billedredigeringsprogram med den ønskede gennemsigtighed, og så hente billedet som baggrund.

Bruger #10216 @ 27.07.11 20:54

4.283

Prøv denne (ref: http://www.quirksmode.org/css/opacity.html ):

Kode

.opacity {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  filter: alpha(opacity=60);
  .opacity: .6;
}

Indlæg senest redigeret d. 27.07.2011 20:55 af Bruger #10216

Bruger #3427 @ 27.07.11 21:39

1.520

Det kræver at browseren undersøtter CSS3 for at RGBA virker, tror jeg nok.

Bruger #16045 @ 27.07.11 21:54

Ville det virke hvis din html evt. så sådan ud:

HTML kode

 <div id="main_content"><div id="text">blahblah</div></div>

og så css sådan her:

CSS kode

 #main_content {
      position:relative;
      width:762px;
      min-height:600px;
      background-color:#000000;
      border:solid 1 px #000000;
      padding:0px 5px;
      filter:alpha(opacity=60);
      opacity:0.6;
  }
 
 #text{
     filter:alpha(opacity=100);
     opacity:1.0;
 }

Bruger #14791 @ 27.07.11 22:33

Esben: Det prøvede jeg faktisk inden jeg valgte at lave dette indlæg, det virkede umiddelbart ikke..

Jeg må lige prøve et par af de andre foreslag i morgen, når jeg lige får 2 min

Bruger #14791 @ 14.08.11 12:39

Jeg kan stadig ikke helt få det til at fungere desværre..

Jeg bruger denne CSS kode for at lave en sort gennemsigtet baggrund, men uden at indholdet bliver gennemsigtigt:

CSS kode

 .login_content {
     position:relative;
     width:202px;
     min-height:200px;
     border:solid 1 px #000000;
     padding:0px 5px;
     background-color: rgba(0,0,0,0.6);

Jeg har så forsøgt efter råd at sætte denne ind:

CSS kode

 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";

For at få det til at fungere i IE.
det virker dog ikke.

Nogen der ved hvordan man kan få det til at fungere i IE, uden at gøre indholdet gennemsigtigt også ?

<< < 1 2 3 > >>

CSS opacity på BG, men ikke på indholdet, hvordan?

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler