Hogy lehet egy div színét jobbra-balra és lefelé folyamatossá tenni?
válasza:Több megoldás is van:
Átlátszó háttérszín:
#atlatszo{
background-color:#00F;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
Átlátszó háttérkép:
background-color helyett background-image
Átlátszó kép (ehhez nézz utána az alfa csatornának):
A képet eleve átlátszóként szerkeszted meg, és mented png kiterjesztéssel.
html-be beszúrt kép nek-is lehet átlátszóságot adni:
img{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
Folyamatossághoz (mozaik):
Ez ne szerepeljen a kódban:
background:no-repeat;
vagy ezek valamelyike szerepeljen:
background-repeat:repeat;
background:repeat;
Elvileg a böngészők alapértelmezetten ismétlik a hátteret, tehát erre nem kell külön utasítani őket, arra viszont utasítani kell, hogy ne ismételjék.
Köszi, de miért kell átlátszó? Ezt a részét nem értem.
Az én weboldalamon, amit készítek pl egy szürke háttér van alapból és azt szeretném, ha a lábléctől kezdve feketévé váljon végtelenítve jobbra-balra lefelé. Akkor a fent leírtakhoz képest, min változtassak?
válasza:A linkelt oldal nem jó példa arra, amit szeretnél, mert ott arról van szó amit én írtam.
A neked szükséges dolognak is több megoldása van:
CSS (ebből ki tudsz indulni, csak egy kicsit kell rajta változtatni):
Másik megoldás:
készítesz egy színátmenetes (grdient) képet, és azt illeszted be egy divbe (ez lehet beszúrt kép vagy háttérkép), és a body-nak vagy egy külső (keret) divnek olyan háttérszínt adsz, amilyenbe a beillesztett kép ki van futtatva.
Ezeken kívül még több megoldás is van, de talán ezek a legegyszerűbbek.
Ha pedig azt szeretnéd, hogy a div a böngészőablak méretének változásával változzon, akkor a szélességét és magasságát %-osan add meg!
válasza:Még egy dolog, hogy értsd miért feszegettem az áttetszőséget.
A linkelt oldalon a kék színnek áttetsző tulajdonsága van, azért látszik a mögötte lévő kép is.
Köszi a választ. És ha háttérképnek beteszek egy szürkéből feketévé váló képet, a háttérszínt pedig feketére állítom, akkor ha egy monitor szélesebb a háttérképemnél, akkor ki fog látszani a fekete kétoldalt nem?
Amúgy az oldalnál, amit küldtem (dpstech) nem a háttér kapott egy átlátszós fedést, hanem alapból a webdesignban készült egy szürke és egy kék színű kép ebből a mátrixos dologból és a szürke be lett téve háttérnek, a kék meg a kívánt magasságnál lefedi a szürkét és végtelenig ismétlődik jobbra-balra úgy tudom. :)
Kipróbáltam a gradientes megoldásodat, de igazából nem ez kell nekem. Nem átmenetet szeretnék, hanem, hogy megy a láblécig szürkével a háttér és onnan hirtelen hopp élesváltásban feketévé válik és ettől a ponttól kezdve bármekkora monitoron nézed jobbra-balra lefelé a háttérszín fekete.
Igazából ehhez megoldás lehet, hogy egy szép nagy szürke képet beteszek háttérnek, a háttérszínt meg feketére állítom, így ha "elfogy a szürke", feketével folytatódik, de oldalirányban, ha nagy monitoron nézik, elfogyhat szintén a szürke, ami nem szép. Túl nagy háttérképet meg nem az igazi betenni nem?
válasza:<div class="footer">
Lábléc
</div>
body {
margin: 0;
padding: 0;
}
.footer {
background: #000;
width: 100%;
}
válasza:Próbáld meg ezek valamelyikét!
Egymásba ágyazott divek:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " [link]
<html xmlns=" [link]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#container{
width:100%;
background-color:#000;
}
#header{
margin:0 auto;
width:980px;
height:100px;
background-color:#FFF;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
</div>
</div>
</body>
</html>
oldalháttér és div:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " [link]
<html xmlns=" [link]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body{
background-color:#000;
}
#header{
margin:0 auto;
width:980px;
height:100px;
background-color:#FFF;
}
</style>
</head>
<body>
<div id="header">
</div>
</body>
</html>
background-image esetén is működik.
Ez alapján, amit lent láttok, nekem csak a Lábléc szöveg magasságában lesz egy fekete csíkom a monitor tetején, utána minden fehér. :(
<div class="footer">
Lábléc
</div>
body {
margin: 0;
padding: 0;
}
.footer {
background: #000;
width: 100%;
}
Kapcsolódó kérdések:
Minden jog fenntartva © 2025, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!