PDA

View Full Version : با افزودن opacity به div، شفافیت فرزندان هم عوض می شود



bftarane
شنبه 27 مهر 1392, 12:32 عصر
سلام.
لطفاً فایل ضمیمه رو ببینید.
چطور میشه کاری کرد که وقتی دیو با آی دی pd_hover، اپاسیتی می گیره دیوی که به رنگ نارنجی هست شفافیتش تغییر نکنه؟
کسانی هم که سختشونه دانلود کنن اینم کدها:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>

#pd_box
{
width:310px; height:330px; float:right; margin:10px;
border:solid 1px #999;
background:#fff;
border-radius:12px;
}
#pd_img
{
width:310px;
height:200px;

z-index:1000;

}
#pd_boxbottom
{width:310px;
height:130px;

}

#pd_hover
{
width:310px;
height:200px;

display:none;
position: relative;


}
#pd_img:hover #pd_hover
{
background:red;
display:block;
opacity:0.5;


}
#pd_img img {
position: absolute;
}
#btn
{
background:orange;
width:100px;
height:100px;
}
</style>
</head>
<body>

<div id="pd_box">
<div id="pd_img">
<img src="Tulips.gif" width="310px" height="200px"/>

<div id="pd_hover"><div id="btn">جزئیات بیشتر</div></div>

</div>


<div id="pd_boxbottom"></div>
</div>
</body>
</html>

Omid Jackson
شنبه 27 مهر 1392, 12:59 عصر
برای اینکار نیاز دارین از سلکتور :after استفاده کنین
z-index هم برای موقعیت هر لایه
یکم تغییرات در کدتون ایجاد کردم، ببینین متوجه میشین

اگر از رنگ استفاده میکنین از rgba استفاده کنین خیلی راحتتره تا opacity

tamafi6
شنبه 27 مهر 1392, 13:42 عصر
اينجاراببينيد
http://barnamenevis.org/showthread.php?423255-%d8%a7%d8%ab%d8%b1-%d9%86%da%a9%d8%b1%d8%af%d9%86-%d8%af%d8%b3%d8%aa%d9%88%d8%b1%d8%a7%d8%aa-css-%d8%b1%d9%88%db%8c-div-%d8%af%d8%a7%d8%ae%d9%84%db%8c