مثال 3 - قرار دادن متن، در یک جعبه شفاف شده
این یک متن دلخواه است که داخل یک جعبه شفاف شده قرار داده شده است. این یک متن دلخواه است که داخل یک جعبه شفاف شده قرار داده شده است. این یک متن دلخواه است که داخل یک جعبه شفاف شده قرار داده شده است. این یک متن دلخواه است که داخل یک جعبه شفاف شده قرار داده شده است.
به کد CSS زیر توجه کنید:
<head>
<style type="text/css">
div.background
{
width:500px;
height:250px;
background:url(klematis.jpg) repeat;
border:2px solid black;
}
div.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
margin:30px 40px;
font-weight:bold;
color:#000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>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.
</p>
</div>
</div>
</body>
</html>
ابتدا یک عنصر div با عرض و ارتفاع ثابت و یک پس زمینه و لبه های مشخص، ایجاد کردیم. سپس یک div کوچکتر داخل div اول قرار دادیم وعرض آنرا ثابت و رنگ پس زمینه و لبه های آن را مانند قبل مشخص کردیم و در ادامه خصوصیت opacity آنرا با مقدار 0.6 تنظیم کردیم.




