كود:
<img src="رابط الصورة" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
و ادا تبي نص في مربع شفاف
كود:
<html>
<head>
<style type="text/css">
div.background
{
width:500px; /*عرض الخلفية*/
height:250px; /*طول الخلفية*/
background:url(hassan.jpg) repeat; /*الخلفية*/
border:2px solid red; /*بون و مقاس الحد*/
}
div.transbox
{
width:400px; /*عرض الخلفية الشفافة*/
height:180px; /*طول الخلفية الشفافة*/
margin:30px 50px;
background-color:#ffffff; /*لون الشفافية*/
border:1px solid black; /*لون و مقاس الحد*/
/* for IE */
filter:alpha(opacity=60); /*التحكم بالشفافية للاكسبلور*/
/* CSS3 standard */
opacity:0.6; /*التحكم بالشفافبة لباقي المتصفحات*/
}
div.transbox p
{
margin:30px 40px;
font-weight:bold;
color:#000000; /*لون النص الموضوع فب الخلفية الشفافة*/
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>text here text here text here text here text here
text here text here text here text here text here
text here text here text here text here text here
text here text here text here text here text here
text here text here text here text here text here
text here text here text here text here text here
text here text here text here text here text here
</p>
</div>
</div>
</body>
</html>>
الشرح موجود في الكود نفسه
موضوع: درس شفافية الصورة و الخلفيات CSS 