ugrás a tartalomhoz

Átlátszó DIV-ben nem átlátszó, normál megjelenésű tartalom

Librama · 2010. Ápr. 13. (K), 23.19
Sziasztok!

Áttűnő div-be/-re szeretnék írni és megjeleníteni nem áttűnő módon szöveget és képet. A DIV megjelenési mérete eredetileg a bele írt, illetve általa befoglalt tartalom függvényében változik.

Ezáltal most a DIV nyitó és záró tagjai között szerepel a szövegformázás. Így megoldva minden dolog amit a divbe rakok (kép, szöveg) szintén a divben beállított értékkel lesz egyezően az is áttűnő. Miközben esztétikai okokból csupán a befoglaló box kellene hogy áttűnő legyen, a benne lévő tartalom már nem.
Valakinek ötlete a megoldásra?
‹ Title paraméterben ritkábban előforduló karakterek link kód ›
 ■
1

rgba

zzrek · 2010. Ápr. 13. (K), 23.39
Szia!
Jobb böngészőkben lehet megoldás az rgba megadása, pl:

background-color:rgba(255,255,255,0.4)
...vagy esetleg egy áttetsző png háttér IE8-ra (vagy filterrel régebbi IE-hez)
2

Üdv! Ezt a parancssort az

Librama · 2010. Ápr. 14. (Sze), 10.00
Üdv!

Ezt a parancssort az átlátszó box DIVjébe, avagy a tartalomnak gondoltad?

Konkrét példa jót tenne. Egyébként nehéz találni épkézláb példát, de lehet hogy csak én voltam béna, mindenesetre nem találtam még.
3

Ez lenne a div háttérszíne

zzrek · 2010. Ápr. 14. (Sze), 11.26
Valahogy így:

 <div style="background-color:rgba(255,155,55,0.3)">
 A szöveg nem átlátszó de a háttér igen.
 </div>
Ez működik FF,Opera,Safari,Chrome alatt, de IE8-ban nem. Ott adj meg háttérnek egy átlátszó png-t esetleg, vagy ha IE7-6-5-ben is működőt akarsz, akkor nézd meg az IE-specifikus "AlphaImageLoader filter"-t.
4

Én közbe ide lyukadtam

Librama · 2010. Ápr. 15. (Cs), 11.31
Én közbe ide lyukadtam ki:
Egy teljesen külön divbe rakom a tartalmat (aminek nem szabad átlátszónak lennie) és rápozicionálom a hozzá méretileg igazított különálló átlátszó boxba.
Ez nálam FF 3.6.3 és IE 8 alatt tulajdonképp az amit LÁTNI akartam - akartunk:
(nem is kell absolute legyen a position)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="hu" lang="hu">
<head>
<style type="text/css">
div.background
{
width:990px;
height:650px;
background:url(./fagyi_hatterkep.jpg) repeat;
border:2px solid black;
}
div.transbox
{
width:400px;
height:270px;
margin:130px 450px;
background-color:#ffffff;
border:1px solid black;
/* for IE */
filter:alpha(opacity=40);
/* CSS3 standard */
opacity:0.4;
}
div.pl
{
position:relative;
border:1px solid white;
margin:-500px 420px 0 460px;
font-weight:bold;
color:white;

}
</style>
</head>

<body>

<div class="background">
<div class="transbox">
</div>
</div>

<div class="pl">This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
<img src="./kave2.jpg"/>
</div>

</body>
</html>
5

Ha még van vele gondod

roxy78 · 2014. Jan. 25. (Szo), 04.35
Szia

hátha segít Neked vagy valaki másnak http://www.hotdog.hu/css-kodok/css-3/rgba-szinmod-felatlatszo-szinek