nicht angemeldet
Gunnar Bittersmann@@Tom74269:
nuqneH
Nun möchte ich dies nicht mittels eines quadrate.gif und
<body style="background-image:url(quadrate.gif);background-repeat:repeat-x"> ...</body>realisieren,
Mittels Inline-Angaben in @style-Attributen möchtest du das wirklich nicht realisieren. Alle Darstellungsangaben gehören ins Stylesheet.
Ähm, was hast du gegen eine nur wenige Byte große Grafikdatei im GIF- oder PNG-Format?
sondern würde die quadrate.gif gerne als Vektorgrafik via css und <div> aufbauen:
<div style="position:absolute; left:0px; top:0px; width:100px; height:100px;">
<div style="position:absolute; left:0px; top:0px; width:50px; height:50px; background:red;"></div>
<div style="position:absolute; left:50px; top:50px; width:50px; height:50px; background:red;"></div>
</div>
Das in eine Vektorgrafik übersetzt sieht so aus:
~~~xml
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1 1" width="100" height="100">
<rect x="0" y="0" width="0.5" height="0.5" fill="red"/>
<rect x="0.5" y="0.5" width="0.5" height="0.5" fill="red"/>
</svg>
Speichern als quadrate.svg und im Stylesheet einbinden:
body { background: url(quadrate.svg) repeat-x }
Funktioniert in aktuellen Firefox, Opera, Chrome, Safari. (IE kann ich gerade nicht testen.)
Anmerkung: Schöner wäre es, die Farbe der Quadrate nicht im SVG, sondern auch im Stylesheet anzugeben. Also keine @fill-Attribute, dafür am Anfang:
<?xml-stylesheet type="text/css" href="default.css" ?>
und im Stylesheet:
rect { fill: red }
Ruft man die SVG-Grafik direkt im Browser auf, funktioniert das auch. Als Hintergrundbild eingebunden färbt jedoch nur Opera die Quadrate.
Qapla'
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)