C9: CSS használata díszítő képek beillesztésére
Alkalmazás
Minden technológia, amely a CSS kódok segítségével alkalmas képek beillesztésére.
Ez a technika az alábbiakra vonatkozik:
Leírás
A technika célja olyan mechanizmus biztosítása, amellyel egy tartalomban egyszerű, díszítő képek illeszthetők be. Ezen kívül olyan képek hozzáadására is alkalmas, amelyek a tartalmon belüli további megjelölés nélkül is alkalmazhatók a tartalom vizuális megformázására. Bizonyos felhasználói programok a felhasználó utasítására figyelmen kívül hagyhatják vagy kikapcsolhatják a CSS-t, és így a CSS kódokat tartalmazó háttérképek egyszerűen eltüntethetők. Így megszüntethetők azok a zavaró hatások, amelyek a CSS-t tartalmazó háttérképek, illetve a monitor beállításából adódó kinagyított betűk vagy nagy kontraszt ütközéséből adódnak.
A háttérképek az alábbi CSS eszközök segítségével illeszthetők be:
-
background, -
background-image, -
:beforeés:afterpszeudo-elemekkel kombinált tartalmak, -
list-style-image.
Megjegyzés: Ez a technika nem alkalmazható minden információt vagy funkciót közvetítő, illetve egy elsődlegesen érzékelési élményt előidéző kép esetében.
Példák
1. példa: Egy HTML oldal háttérképe
A weblap stíluslapja meghatározza az egész honlap háttérképét.
Példa kód:
?
<style type="text/css">
body { background: #ffe url('/images/home-bg.jpg') repeat; }
</style>
</head>
<body>
?
2. példa: CSS háttérkép rámozgatásos képek esetére
A honlap stíluslapja a CSS background
eszközének segítségével állít elő dekoratív
rámozgatásos hatásokat, amelyek egy hivatkozásra való
rámutatáskor aktiválódnak.
Példa kód:
a:hover { background: #ffe url('/images/hover.gif') repeat; color: #000;
text-decoration: none;
}
3. példa: CSS háttérképek táblázatok és más elemek sarkainak lekerekítésére
A weboldal stíluslapja a CSS background
eszköz segítségével kerekíti le bizonyos elemek
sarkait.
Példa kód:
?
<style type="text/css">
div#theComments { width:600px; }
div.aComment { background: url('images/middle.gif') repeat-y left top;
margin:0 0 30px 0; }
div.aComment blockquote { background: url('images/top.gif') no-repeat left top;
margin:0; padding:8px 16px; }
div.aComment div.submitter { background:#fff url('images/bottom.gif') no-repeat left top;
margin:0; padding-top:30px; }
</style>
</head>
<body>
<div id="theComments">
<div class="aComment">
<blockquote>
<p>Hi John, I really like this technique and I'm gonna use it on my own Website!</p>
</blockquote>
<div class="submitter">
<p class="cite"><a href="http://example.com/">anonymous coward</a> from Elbonia</p>
</div>
</div>
<div class="aComment">
?
</div>
</div>
?
4. példa: Képcsere alkalmazása egy fejléc vizuális megjelenésének fokozása céljából.
Az alábbi példában a fejléc elem szövegét egy díszítő kép helyettesíti.
Példa kód:
<style type="text/css">
h3#about {
width: 480px;
height: 34px;
position: relative;
}
h3#about span {
background: url(about.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
</style>
...
<h3 id="about" title="About example.com"> <span></span>About example.com </h3>
Források
A források csak információs célokat szolgálnak, és csak angolul elérhetőek.
- A
HTML 4.01 specification kijelenti, hogy a body elem
backgroundattribútuma helytelen.
Kapcsolódó technikák
Ellenőrzések
Folyamat
- Ellenőrizze, hogy kerültek-e beillesztésre
dekoratív képek.
- Ellenőrizze, hogy ezeket tartalmazza-e a CSS stíluslap.
Elvárható eredmények
- Amennyiben az 1. pont igaz, a 2. pont is igaz.