Fix és átlátszó hátterű oldalon, mnogoblog

Itt szeretném elmondani neked egy érdekes vizuális hatást, amely létrehozta segítségével a két figyelemreméltó tulajdonságait a háttérben (háttér): az átláthatóság és állandóság.






Töltse le a forráskódot a cikket alatt lehet

Ezzel a hatása, akkor hozzon létre egy eredeti design a helyén, például, hozzon létre itt, mint:

Demo példát is megtekinthető ezen a linken:

De először is, hogy le az elmélet.

Nézzük meg külön-külön minden egyes ilyen tulajdonságokkal.

1. Fix háttér oldalon.

Tag háttér-kötődés határozza meg, hogy a háttérkép görgeti a tartalommal együtt az elem.

A kép lehet rögzíteni és mozdulatlan marad, vagy együtt mozog a dokumentumot.

Tag background-attachment vehet a következő értékeket:

fix - teszi a háttérképet egy elem rögzített.
scroll - Lehetővé teszi, hogy mozog a háttérben tartalmával együtt (alapértelmezett).
öröklik - öröklik értékek a szülő.

Létrehozásához fix, mozdulatlan háttér helyén, regisztrálnia kell az aktában stílusok (style.css) a következő sort:

Ezen túlmenően, a címke lehet használni az egyes elemek a helyén, mint például div (blokkok), és mások.

Ezt a tulajdonságot meg sokkal hatásosabb, ha adsz egy háttérképet használata helyett a következő címkét:

Ahol „... / image.jpg” - az utat a háttérképet.
Mint ez:

Azt is meg kell emlékeztetni, hogy a tag background-repeat. ami megadja, hogy ez megismétlődik háttérkép.
Lehetőség van beállítani a ismétlődési minta csak vízszintesen, függőlegesen vagy mindkét irányban.
Mi is létrehozhatunk egy fix hátteret hely érdekes nézni a címke értéke:
no-repeat - Set egy háttérkép ismétlések nélkül.

2. Átláthatóság Oldal háttérben.
Itt kell a homály tag.
Ez határozza meg az átláthatóság szintjét a weboldal elem.
A részleges vagy teljes átláthatóságot keresztül elem nyúlik ki tapéta vagy más elemek alatt helyezkedik el áttetsző objektum.

Meg kell adnia, hogy az Internet Explorer 9.0 változtatni az átláthatóságot a szűrők alkalmazása a böngésző kell írni filter: alpha (fényelnyelés = 50), ahol a homály paraméter érték lehet 0-100.

De akkor felhasználásával címkézni fényelnyelés. hogy működik minden böngészőben, kivéve az Internet Explorer.

Ez a címke van írva a következő:

Ahol X - lehet-értéke 0,0-1,0. A kisebb érték az elem átláthatóbb.
például:

Ezen túlmenően, a címke lehet használni az egyes elemek a helyén, mint például div (blokkok), és mások.

Most kezdjük gyakorolni, és hozzon létre egy honlapot, ami miatt a fentiek kombinációja tulajdonságait a háttérben.

Ezen effekt, akkor kell csak feltölteni egy háttérképet, és állítsa be a kép stílusok (style.css) sablon (téma) az oldalon.

Az alábbi példában, azt fogja használni a témában „Európa”. ez a téma a wordpress.org, így telepíteni, vagy ahhoz, hogy letöltse a panel a honlapon, válassza ki a „Megjelenés” a bal oldali menüben, majd sub „Témák”, megy a „Beállítás a regisztráció” és a keresősáv, írja Európában .

Jobb a sablonok listájában válassza ki a style.css fájlt és nyissa meg.

És nézi a kód BODY tag.

Most add hozzá a háttérkép háttér Adjunk ingatlan mozdulatlanság (fix háttér):

Következő hozzá kell adnunk a fejléc, lábléc és oldalsáv tartalommal (pontosabban annak widget) átláthatóságát az ingatlan.

Változás az átláthatóságot a tartalmat.
Ehhez keressük meg a címke tartalmát, és változtassa meg a következő kódot:

Változás az átláthatóságot a lábléc (pince).
Ehhez keresse meg a lábléc tag, és változtassa meg a következő kódot:

Változás az átláthatóságot a sáv (hatékonyabban fogja változtatni az átláthatóságot a sidebar widget).
Ehhez keresse meg a címkét, és módosíthatja a kütyü azt az alábbi kódot:

Azt is, hogy kiemelje a Modulfejléc. Meg lehet változtatni a színét, és azt is tedd a fóliát.

Megtalálható az alábbi kódot:

És a változás, hogy:

Változás az átláthatóságot a kupakot.
Ehhez találunk a címke fejléc:

Itt csak hozzá a vonalak és megkapta a következő:

Kapcsolódó bejegyzések:

Hozzászólás navigáció

Rovására átláthatóság nem interesno..bolshe kedveli „hogyan kell rögzíteni a háttérben”

Köszönöm a tanulságos cikket. Fog tenni a Photoshop áttetsző elemeket most készülnek a segítségével a stílusok. Csak az a kérdés: valószínűleg valahogy optimalizálni egy ilyen nagy kép? Ahhoz, hogy a helyszínen gyorsan töltődjön be.

Nagyon jó! De hogyan lehet ezt csak blokk volt átlátható, és nincs tartalom. És akkor azt a szöveget a blokk és a kép lesz átlátható, túl ...

Egységeknél lehet próbálni, hogy egy félig átlátszó PNG vagy GIF háttérképet.

Csatlakozom Nikita. Például az oldalsó sáv van egy világos, és a kép tetején az oldalsó sáv az is világossá vált, hogy a csúnya, t. Hogy. Az áttetsző háttérrel. Hogyan, hogy a fénykép nem volt átlátható?
Köszönöm.

Egyáltalán nem történt semmi. Én akkor fizetett volna, ha valaki segített megszabadulni ezt a problémát. HELP ME.

Azt is szeretném, hogy megtanulják, hogyan lehet átlátszó csak maga az egység, de nem annak tartalmát.

Köszönöm szépen! Hála a cikket, végül kiderült, hogy az átláthatóság a helyén)

Üdvözlünk! Mondd, kérlek, hogyan kell változtatni a átláthatóságot, például, egy hírcsatorna (azaz az átláthatóságot a háttérben a szöveget) megváltoztatása nélkül az átláthatóságot a háttérképet és a szöveg?

zemlyapermskogokraya.rf a honlapomon, ahol a szöveg nem tesz egy fehér háttér átlátszó, és bár olvasni a cikket széltében

Jó napot mindenkinek ... Az a tény, hogy nem találom a kódot, amit leírni ... maga a téma minden bezárva, és nem azokon a helyeken? akkor nem tud segíteni nekem? de aztán kitört a fejem)) Köszönöm zpranee

I. téma «tempera» dolgozik wordpress ... hogyan és hol találom meg a kódot, amely felelős a blokk? ((

Köszönöm a cikket a blogján, hogy nem minden esetben persze, de néhány tetszett az ötlet)