Transparente CSS-Filter (CSS 3)[IE|M|O|G]

von: Werner Zenk

Transparente CSS-Filter für Bilder und Text.

Bild ohne CSS-Filter

Bild mit CSS-Filter

Quelltext:

<img src="bild.png" style="filter: alpha(opacity=40); opacity: 0.4;">

Opacity steuert die Deckkraft einer Ebene.
Für den Internet Explorer (Version 6-8) verwenden Sie:
"filter: alpha(opacity=40);"
bei allen anderen Browsern einschließlich Internet Explorer 9 verwenden Sie:
"opacity: 0.4;"

Text ohne CSS-Filter

Lorem ipsum dolor sit amet Morbi quis Vestibulum Maecenas at vitae mollis montes vitae et id lacus nibh eros enim est Phasellus sed elit vitae venenatis Pellentesque metus aliquam facilisi.

Text mit CSS-Filter

Lorem ipsum dolor sit amet Morbi quis Vestibulum Maecenas at vitae mollis montes vitae et id lacus nibh eros enim est Phasellus sed elit vitae venenatis Pellentesque metus aliquam facilisi.

Quelltext:

<div style="background-color: #C1C1FF; color: #0000BB; padding: 10px; 
filter: alpha(opacity=50); opacity: 0.5;">
Lorem ipsum dolor sit amet ...
</div>

• Zwei Bilder übereinander legen

Quelltext:

<table cellPadding="0" cellSpacing="0">
 <tr>
  <td style="background-image: url(textur.jpg);">
   <img src="bild.png" style="filter: alpha(opacity=60); opacity: 0.6;">
  </td>
 </tr>
</table>

textur.jpg - 256 x 256 Pixel - 9,21 KB

• Bild mit gelber Hintergrundfarbe

Quelltext:

<div style="background-color: #FFFF97; width: 444px; height: 207px;">
<img src="bild.png" style="filter: alpha(opacity=40); opacity: 0.4;">
</div>

• Transparenter Text über einem Hintergrundbild

Lorem ipsum dolor sit amet Morbi quis

Quelltext:

<table cellPadding="0" cellSpacing="0">
 <tr>
  <td style="background-image: url(bild.png); width: 444px; height: 207px;">
   <div style="font-family: 'Comic Sans MS', 'Times New Roman';
     font-size: 22px; font-weight: bold; color: #454545; text-align: center; width: 100%;
     height: 35px; background-color: #FFFFFF; filter: alpha(opacity=40); opacity: 0.4;">
    Lorem ipsum dolor sit amet Morbi quis
   </div>
  </td>
 </tr>
</table>

• Beispiele mit opacity:

opacity:0.1
opacity:0.2
opacity:0.3
opacity:0.4
opacity:0.5
opacity:0.6
opacity:0.7
opacity:0.8
opacity:0.9
opacity:1.0

Und Ihre Meinung? Sie vermissen auf dieser Seite wichtige Informationen oder haben Hinweise für uns?

Hilfe finden Sie im » netzgemein.de - Forum. Auch als „Gast” können Sie dort Fragen stellen!

Das könnte Sie interessieren:

CSS Hyperlink #27

CSS Hyperlink #28

CSS Bausteine 1

CSS Hyperlink #29

CSS Befehlsübersicht

Tasteneffekte mit CSS - Mit etwas CSS-Code bekommt man hervorragende Tasteneffekte.

Formulare ohne Tabellen - Formulare ohne Tabellen lassen sich mit CSS sehr einfach formatieren. Hinsichtlich der Barrierefreiheit ist ein Label-Tag, einfach Pflicht auf jeder Website.

Beim Textfeld fokussieren die Hintergrundfarbe wechseln

CSS Befehle: Hintergrund …mehr