Overlay Transparent

Tutorials von Thomas Frei-Herrmann

Skript für transparentes Overlay als Text über Bild

Bild von www.n3po.com

Toller Wasserfall
 

Dieses Skript gehört hierhin:

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags

<style type="text/css">
<!--
/* Dies ist für das Hintergrundbild */
#bg {
width: 990px;
height: 153px;
background: url(./assets/images/Panorama-Wasserfall.jpg);
border: 1px solid #000000;
}

/* Dies ist die transparente Box für die Schrift */
#transbox {
width: 990px;
/* Hier gebt Ihr die Position der transparenten Box an */
margin-top: 132px;
background-color: #FFFFFF;
border-top: 1px solid #000000;
border-bottom: 0px solid #000000;
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
}

/* Das ist der Container für die solide Schrift.
position: relative verwendet für den IE */
#transbox div {
padding: 3px;
font-family: verdana;
font-size: 12px;
font-weight: bold;
color: #000000;
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity:1;
position: relative;
}
-->
</style>

Die DIV-Container gehören hierhin. Das Textfeld an der Stelle aufziehen, wo das Bild mit dem transparenten Overlay erscheinen soll:

> Textfeld aufziehen (Cursor blinkt) > mittlere Button “Textfeld” > Button “HTML

in den “HTML-Code Editor” einfügen. Ich habe den Text hier noch mit dem “tag” <center> zentriert </center>

<div id="bg">
   <div id="transbox">
      <div><center>Toller Wasserfall</center></div>
   </div>
</div>

Viel Erfolg !

diese Seite weiter empfehlen



Counter Statistik