esteftaats
سه شنبه 04 شهریور 1393, 15:12 عصر
سلام دوستان.
می خواستم یه طرحی این شکلی بسازم با css
به body بک گراند دادم بعدش یک div هم وسط صفحه گذاشتم که opacity با مقدار 0.2 داره.
حالا می خوام وسط اون div یک div دیگه که opacity نداشته باشه مانند داخلی ترین تصویر زیر داشته باشم اما وقتی این کار رو می کنم اون div هم opacity داره.
به عبارتی این شکلی شده :
برای اینکه داخل ترین div شفاف نباشه باید چکار کنم؟
کدها :
<body>
<div id="all">
<div id="center">
<div id="center_hover">
<div id="center_hover_div">
</div>
</div>
</div>
</div>
</body>
body,table,tr,td,div,p,img,a,ul,li{
text-align:right;
direction:rtl;
margin:0px;
padding:0px;
}
body{
background-image: url('images/bg.jpg');
font-size:11px;
line-height:22px;
color:black;
font-family:tahoma;
}
a{text-decoration:none;}
li.litext a{color:white;}
a:hover {color:red;}
#all{
margin:0px auto 0px auto;
width:960px;
}
#center{
width:960px;
float:center;
}
#center_hover{
width:960px;
height:700px;
float:right;
background-color: #000000;
opacity:0.2;
}
#center_hover_div{
width:900px;
height:600px;
margin:50px 30px 50px 30px;
float:right;
background-color: #ffffff;
opacity:25;
}
می خواستم یه طرحی این شکلی بسازم با css
به body بک گراند دادم بعدش یک div هم وسط صفحه گذاشتم که opacity با مقدار 0.2 داره.
حالا می خوام وسط اون div یک div دیگه که opacity نداشته باشه مانند داخلی ترین تصویر زیر داشته باشم اما وقتی این کار رو می کنم اون div هم opacity داره.
به عبارتی این شکلی شده :
برای اینکه داخل ترین div شفاف نباشه باید چکار کنم؟
کدها :
<body>
<div id="all">
<div id="center">
<div id="center_hover">
<div id="center_hover_div">
</div>
</div>
</div>
</div>
</body>
body,table,tr,td,div,p,img,a,ul,li{
text-align:right;
direction:rtl;
margin:0px;
padding:0px;
}
body{
background-image: url('images/bg.jpg');
font-size:11px;
line-height:22px;
color:black;
font-family:tahoma;
}
a{text-decoration:none;}
li.litext a{color:white;}
a:hover {color:red;}
#all{
margin:0px auto 0px auto;
width:960px;
}
#center{
width:960px;
float:center;
}
#center_hover{
width:960px;
height:700px;
float:right;
background-color: #000000;
opacity:0.2;
}
#center_hover_div{
width:900px;
height:600px;
margin:50px 30px 50px 30px;
float:right;
background-color: #ffffff;
opacity:25;
}