(Click pentru marire)
Rătăcind în jurul forumurilor și blogurilor, întâlnesc de multe ori o problemă: oamenii caută o soluție la problemă, cum să facă un text opac într-o cutie transparentă cu marginile rotunjite în CSS?
Ei bine, atunci. La inceput facem blocul cu marginile rotunjite, adevarul functioneaza numai in FF, iar in colturile rotunde ramase nu va fi.
HTML:
CSS:
.poziția coloanei dreapta: relativă;
top: 80px;
drept: 30px;
padding: 30px;
lățime: 600px;
culoare: # 000;
float: dreapta;
overflow: ascuns;
>
.coloana din dreapta; opacitatea transparenței: 0,5;
filtru: alfa (opacitate = 50);
-moz-opacitate: 0,5;
fundal-culoare: #fff;
lățime: 660px;
înălțime: 2500px;
poziția: absolută;
top: 0px;
stânga: 0px;
frontieră: 1px solid # 9E5C28;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
raza de graniță: 15px;
>
Acum, adăugați o clasă (de ex. .cont), care va conține text.
HTML:
CSS:
.cont
Totul funcționează. Și în cornișă, chiar colțurile rotunjite sunt
Exemplul este vizibil pe fotografia de sus, faceți clic pentru a mări!
mulțumesc, totul este perfect vizibil
vă mulțumesc. deși colțurile rotunjite nu au ieșit
Rotunjirea colțurilor funcționează numai în FF (Mozilla).
Mare, trebuie să exersați.
Codul CSS congelat.
Care sunt parametrii de două ori diferiți pentru potrivirea coloanei .right?
dar cum să fiți dacă doriți ca înălțimea blocului transparent să fie ajustată automat la înălțimea blocului cu textul? Aici aparent fără js (jquery) nu se poate face?
fundal: rgba (0, 170, 238, 0,9); / * Culoare de fundal * /
Trimiteți-le prietenilor: