nedash
on May 05, 2021 10:53 PM
1048 Views
hi
I use code for jquery slider here there is description div.
<div id="rot1">
<img src="" width="643" height="393" class="bg" alt="" />
<div class="heading">
<h1></h1>
</div>
<div class="description">
<p></p>
</div>
</div>
in CSS define opacity:0.7
.rotator .description{
width:300px;
height:180px;
position:absolute;
bottom:0px;
left:0px;
float:left;
background-color:#222;
opacity:0.7;
}
.rotator .description p{
width:290px;
text-align:left;
margin:10px 0 0 10px;
text-transform:none;
letter-spacing:normal;
line-height:26px;
font-size:25px;
float:left;
}
here it will effect opacity in div class description and in P.
I mean both div background and Text will effect opacity.
here I don't want Texts have opacity I want just div class description has opacity.
how I can do it?
Best regards
Neda
Download FREE API for Word, Excel and PDF in ASP.Net:
Download
Hi nedash,
Use background rgba(0,0,0,.7) and remove opacity 0.7.
CSS
.rotator .description {
width: 500px;
height: 80px;
position: absolute;
bottom: 0px;
left: 0px;
padding: 20px;
background-color: #222;
-moz-border-radius: 0px 10px 0px 0px;
-webkit-border-top-right-radius: 10px;
border-top-right-radius: 10px;
/*opacity: 0.7;*/
background-color: rgba(0, 0, 0, 0.7);
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
border-top: 2px solid #000;
border-right: 2px solid #000;
}
.rotator .description p {
text-shadow: -1px 1px 1px #000;
text-transform: none;
letter-spacing: normal;
line-height: 26px;
}