Hintergrund transparent , Schrit nicht

[Binary]

Hallo zusammen,

habe folgende tolle Effekte hier gefunden:.http://www.sohtanaka.com/web-design/spice-up-your-images-with-css/

Bei einem habe ich ein Problem:

<div class="img-desc">
    <img src="sample.jpg" alt="" />
    <cite>Salone del mobile Milano, April 2008 - Peeta</cite>
</div>

.img-desc {
    position: relative;
    display: block;
    height:335px;
    width: 575px;
}
.img-desc cite {
    background: #111;
    filter:alpha(opacity=55);
    opacity:.55;
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 555px;
    padding: 10px;
    border-top: 1px solid #999;
}

Wie kriege ich die Schrift weiß und den Rest bzw. den Rahmen weiterhin durchsichtig?

Vielen Dank und VG
Binary

 

[alogheo]

Müsste so funzen:

.img-desc {
    position: relative;
    display: block;
    height:335px;
    width: 575px;
}
.img-desc cite {
    background: #111;
    filter:alpha(opacity=55);
    opacity:.55;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 555px;
    padding: 10px;
    border-top: 1px solid #999;
}
.img-desc cite span
{
    opacity:1;
    filter:alpha(opacity=100);
    color: #fff;
}

<div class="img-desc">
    <img src="sample.jpg" alt="" />
    <cite><span>Salone del mobile Milano, April 2008 - Peeta</span></cite>
</div>

 

[Binary]

Danke!
Hat aber leider nicht funktioniert :(
Code wird ignoriert.

                  <div id="ls_gallery_box"> 
                    <div id="ls_gallery"><ul> 
                    <li><div class="img-desc"> 
                        <img class="lifesection" id="ls1" src="img/max_lebensabschnitt-schule_preview.png"> 
                        <cite><center><ls_span>Schule</span></center></cite> 
                    </div></li> 
                    <li><div class="img-desc"> 
                        <img class="lifesection" src="img/max_lebensabschnitt-studium_preview.png"> 
                        <cite><center>Studium</center></cite> 
                    </div></li> 
                    <div style="clear: both;"></div></div> 
                    </div> 
                    </div>

class='lifesection' id='ls1' dienen nur der Identification im weiteren.

#ls_gallery li
{
list-style-type: none;
float: left;
margin: 0 3px 3px 0;
text-align: center;
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
color: gey;
}

#ls_gallery img
{
display: block;
}

#ls_gallery_box
{
padding-left:130px;
}

div.lscontentbox{
 background: #F7F7F7;
    border:1px dotted #ccc;
    border-radius: 0 0 6px 6px;
    width: 541px;
    padding-left:20px;
    padding-right:20px;
    }

.img-desc {
    position: relative;
    display: block;
}
.img-desc cite {
    background: #111;
    filter:alpha(opacity=45);
    opacity:.45;
    padding:2px;
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 66px;
    border-radius: 0 0 8px 8px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size:12px;
    font-weight:600;
}

.img-desc cite span
{
    opacity:1;
    filter:alpha(opacity=100);
    color: #fff;}

 

[mermshaus]

Ich antworte mal lediglich auf den Threadtitel „Hintergrund transparent , Schrit nicht“, weil – im Ernst – den HTML-in-JavaScript-Code im letzten Post will kein Mensch lesen.

Du kannst immer ein semi-transparentes (Alpha-Kanal) Hintergrundbild setzen. Die opacity-Geschichten beziehen sich meines Wissens immer auf das gesamte Element (also auch Schrift und ähnliches).

 

[threadi]

Genau, und somit auch auf alle innenliegenden Elemente. Wenn man den Hintergrund transparent machen möchte, die Inhalte aber nicht, gibt es 2 Möglichkeiten:

a) Hintergrund vom Inhalt trennen: 2 im HTML nebeneinander liegenden Elemente schaffen von denen eine den transparenten Hintergrund erhält, die andere die Inhalte. Ersteres dann per absolute Positionierung hinter das Zweitere legen.

b) Wenn es sich um eine einheitliche Hintergrundfarbe handelt, kann man diese auch als 1x1 Pixel große halbtransparente PNG erzeugen und diese als sich wiederholenden Hintergrundbild einfügen. Dabei verzichtet man auf die CSS-Eigenschaften für Transparenz, wodurch die Texte und Inhalte auch nicht transparent werden.

 

[Binary]

Sorry, ich bekomme es nicht hin, habe aber versucht den Code oben auf ein beispielhaftes Minimum zu reduzieren.

 

[mermshaus]

Dein HTML-Code ist fehlerhaft. Setz vielleicht erstmal dort an.

- The W3C Markup Validation Service

 

[mermshaus]

Dein HTML-Code ist fehlerhaft. Setz vielleicht erstmal dort an.

- The W3C Markup Validation Service

 

[Binary]

OK, sorry.
Habe es korrigiert:

            <div id="ls_gallery_box"> 
            <div id="ls_gallery"><ul> 
            <li><div class="img-desc"> 
                <img class="lifesection" id="ls1" src="img/max_lebensabschnitt-schule_preview.png"> 
                <cite><center><span>Schule</span></center></cite> 
            </div></li> 
            <li><div class="img-desc"> 
                <img class="lifesection" id="ls2" src="img/max_lebensabschnitt-studium_preview.png"> 
                <cite><center><span>Studium</span></center></cite> 
            </div></li> 
            <div style="clear: both;"></div></div> 
            </div>

.img-desc {
    position: relative;
    display: block;
    height:335px;
    width: 575px;
}
.img-desc cite {
    background: #111;
    filter:alpha(opacity=55);
    opacity:.55;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 555px;
    padding: 10px;
    border-top: 1px solid #999;
}
.img-desc cite span
{
    opacity:1;
    filter:alpha(opacity=100);
    color: #fff;
}

 

[Elroy]

Hallo.

Dein HTML Code ist immer noch fehlerhaft.
Eine Liste die man öffnet muss man auch wieder schliessen.

Und noch einmal meine Frage: Was willst du mit <cite> bezwecken?
Weisst du wofür es da ist?

Gruss
Elroy