Set DIV opacity only not text using CSS

nedash
 
on May 05, 2021 10:53 PM
1108 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
dharmendr
 
on May 06, 2021 03:44 AM

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;
}