tutorials.de Buch-Aktion 05/2012
Like Tree2Danke
  • 1 Beitrag von spicelab
  • 1 Beitrag von spicelab
ERLEDIGT
JA
ANTWORTEN
5
ZUGRIFFE
360
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 22.08.11 23:26 #1
    Netzwerkidi Netzwerkidi ist offline Mitglied Gold
    Registriert seit
    Oct 2010
    Beiträge
    237
    Blog-Einträge
    1
    Hallo zusammen,

    jetzt bin ich hier schon dankenswerterweise fündig geworden in Sachen DIV-Zentrierung, aber die Transparenz bekomme ich einfach nicht hin.

    Das zentrierte Bild soll nicht transparent sein, aber immer hakt es in einer Version.
    In irgendeiner älteren IE-Version, die mein PSPad nutzt, klappt das in einer Variante, aber dafür bei FF, IE6/7+ und Opera dann nicht oder umgekehrt.

    Wer weiß wie es geht, also in allen Browsern die Fläche außerhalb des Bildes transparent?

    Besten Dank und Grüße

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>http://www.pmob.co.uk/temp/vertical-align11.htm</title>
<style type="text/css">
* {margin:0;padding:0}
html,body{height:100%}
#wrapper{
    height:100%;
    width:100%;
    display:table;
    vertical-align:middle;
    background-color:white;
    
    
    /*-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";*/ 
   filter:alpha(opacity=50); 
    /*-moz-opacity:0.50;*/
   opacity:0.50;  
  
  
}
#outer{
    display:table-cell;
    vertical-align:middle;
}
#inner{
    position:relative;
    left:50%;
    float:left; 
        
}
#image{
    border:1px solid #000;
    padding:20px 20px;
    position:relative;
    text-align:right;
    left:-50%;
    background-color:white;
}
 
#image img {
  width:500px;
}
 
 
</style>
<!--[if lt IE 8]>
<style type="text/css">
#wrapper{   overflow:hidden;/* stop hoz scroll bar from appearing*/}
#inner {top:50%}
#image{top:-50%;}
</style>
<![endif]-->
</head>
 
<body style="background-image:url('http://style.tutorials.de/v10/headerlogo.png');">
<div id="wrapper">
    <div id="outer">
        <div id="inner">
            <div id="image">
         <a href="#"><img id="zoomImg" src="http://style.tutorials.de/v10/headerlogo.png" /></a>    
            </div>
        </div>
    </div>
</div>
</body>
</html>
     
    Zitieren Zitieren
  2. 23.08.11 05:53 #2
    Avatar von spicelab
    spicelab spicelab ist offline ZENmechanic
    Registriert seit
    Feb 2010
    Beiträge
    1.744
    Die opacity-/filter:alpha(opacity)-Eigenschaft wird grundsätzlich immer an seine inneren nachfolgenden Kinder-Elemente vererbt.

    Lösung in diesem Fall: für #wrapper stattdessen eine semitransparente PNG-Grafik als Hintergrundbild einsetzen.

    Siehe Cross-browser semi-transparent backgrounds, um den IE bis einschließlich Version 6 zu bedienen, der transparente PNG-Grafiken nicht darstellen kann.
    Geändert von spicelab (23.08.11 um 06:35 Uhr) Grund: Link für ältere IEs nachgereicht
    Netzwerkidi bedankt sich. 
    Zitieren Zitieren
  3. 23.08.11 09:09 #3
    Netzwerkidi Netzwerkidi ist offline Mitglied Gold
    Registriert seit
    Oct 2010
    Beiträge
    237
    Blog-Einträge
    1
    Genau, warum einfach, wenn es auch kompliziert sein kann?
    Ich danke Dir,
     
    Zitieren Zitieren
  4. 23.08.11 10:56 #4
    Netzwerkidi Netzwerkidi ist offline Mitglied Gold
    Registriert seit
    Oct 2010
    Beiträge
    237
    Blog-Einträge
    1
    So sieht meine Lösung nun aus:

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title></title>
  
  <style>
  * {color:white}
  #box1 {
    z-index: 1;
    width:100%;
    height:100%;
    top:0;
    left:0;
    text-align:center;
    background-image:url("http://www.abload.de/img/transgray75jpyb.png");
  }
  #bild {
    z-index: 1; 
    width:600px; 
    margin-top:200px;
    margin-left: auto;
    margin-right: auto;
    border:25px solid white;
  }
  #bedienung {
    z-index:1;
    height:50px; 
  }
  </style>
  
  
  </head>
  <body style="background-image:url('http://www.abload.de/img/2011-08-23_1051413r02.png');">     
  <div id="box1">
    <div id="box2">
      <img id="bild" src="http://www.abload.de/img/2011-08-23_1051413r02.png" />
      <div id="bedienung">Bedienung, bitte!!
      </div>
    </div>
  </div>  
</body>
</html>
     
    Zitieren Zitieren
  5. 23.08.11 11:05 #5
    Avatar von spicelab
    spicelab spicelab ist offline ZENmechanic
    Registriert seit
    Feb 2010
    Beiträge
    1.744
    Zitat Zitat von Netzwerkidi Beitrag anzeigen
    So sieht meine Lösung nun aus:

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

      #box1 {
    z-index: 1;
    width:100%;
    height:100%;
    top:0;
    left:0;
    text-align:center;
    background-image:url("http://www.abload.de/img/transgray75jpyb.png");
  }
  #bild {
    z-index: 1; 
    width:600px; 
    margin-top:200px;
    margin-left: auto;
    margin-right: auto;
    border:25px solid white;
  }
  #bedienung {
    z-index:1;
    height:50px; 
  }
    Auch wenn's hier keine Auswirkung zu scheinen mag, ohne eine Angabe zur Art der Positionierung (absolute, relative o. fixed) zeigt z-index keine Wirkung! Gleiches gilt im Falle von #box1 für die Positionsangaben top u. left!
    Netzwerkidi bedankt sich. 
    Zitieren Zitieren
  6. 23.08.11 11:41 #6
    Netzwerkidi Netzwerkidi ist offline Mitglied Gold
    Registriert seit
    Oct 2010
    Beiträge
    237
    Blog-Einträge
    1
    Du hast recht. Ich habe inzwischen auch ein absolute eingefügt, weil sonst der Rest nicht unter Box und Bild verschwindet. Danke.
     
    Zitieren Zitieren
« design auf 1024px optimieren | Element über 2 Klassen selektieren »

Ähnliche Themen

  1. IE 7 Opacity BUG?!
    Von Ryan im Forum CSS
    Antworten: 1
    Letzter Beitrag: 04.03.10, 17:01
  2. Transparenzproblem Firefox
    Von RaRu im Forum CSS
    Antworten: 6
    Letzter Beitrag: 12.05.08, 13:34
  3. Opacity
    Von thespecialx im Forum CSS
    Antworten: 5
    Letzter Beitrag: 27.06.07, 22:35
  4. InDesign CS Transparenzproblem bei PDF
    Von raida im Forum Desktop Publishing (DTP)
    Antworten: 6
    Letzter Beitrag: 05.12.04, 19:06
  5. Label-Transparenzproblem
    Von wertzui im Forum .NET Archiv
    Antworten: 1
    Letzter Beitrag: 10.05.04, 17:04