Member Avatar for tqmd1

Sir I have these codes

<html>
<head>
<title>untitled</title>
<style type="text/css">

#box5{
margin:10px; 
width:250px;
height:250px;
border:1px solid green;
overflow:auto;
float:left;
background-size:50%;
background: url(https://developer.mozilla.org/media/img/mdn-logo.png);
background-repeat:no-repeat;
background-position:center;
padding:20px;
opacity: 0.2;
}

#box5 p{
opacity:1;
color:red;
font-size:18;
font-weight:bolder;
}

</style>
</head>

<body>
    <div id="box5">
        <p>This text is normat text over opacity background</p>
    </div>
</body>
</html>

the problem is text is not showing in normal form.
text is also showing in div opacity mode.
I want to display text in normal form.
So I used this command

#box5 p{
opacity:1;
color:red;
font-size:18;
font-weight:bolder;
}

But Failed.
Please help

Edited by tqmd1 because: w
  • 2 Contributors
  • 2 Replies
  • 129 Views
  • 5 Hours Discussion Span
  • Latest Post Latest Post by cereal
Member Avatar for cereal

Hi, create a container for #box5, then you can use two methods.

Method 1

Move the text outside the opaque element and move it over, something like this:

<div id="box">

    <div id="box5"></div>

    <div id="box5-p">
        This text is normat text over opacity background
    </div>

</div>

Styles:

#box
{
    position: relative;
    width:250px;
    height:250px;
}

#box5 {
    margin:10px;
    width:100%;
    height:250px;
    border:1px solid green;
    overflow:auto;
    float:left;
    background-size:50%;
    background: url(https://developer.mozilla.org/media/img/mdn-logo.png);
    background-repeat:no-repeat;
    background-position:center;
    padding:20px;
    opacity: 0.2;
    z-index:99;
}

#box5-p {
    position: absolute;
    top:20px;
    left:20px;
    opacity:1;
    color:red;
    font-size:18;
    font-weight:bolder;
    z-index:100;
}

Live example: http://jsfiddle.net/qe3xpzhn/

Method 2

Use the #box5::after rule where you define the background and the opacity level, something like:

<div id="box">

    <div id="box5">
        This text is normat text over opacity background. This text is normat text over opacity background.
    </div>

</div>

And the styles:

#box
{
    position: relative;
    width:250px;
    height:250px;
}

#box5 {
    margin:10px;
    width:250px;
    height:250px;
    border:1px solid green;
    overflow:auto;
    position: relative;
    float:left;
    padding:20px;
}

#box5::after
{
    content: "";
    opacity:0.2;
    background-image:url(https://developer.mozilla.org/media/img/mdn-logo.png);
    background-repeat:no-repeat;
    background-position:center;
    background-size:50%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    padding:20px;
    overflow:auto;
}

Live example: http://jsfiddle.net/2sc4zpjx/
Source: https://css-tricks.com/snippets/css/transparent-background-images/

commented: +1 +7
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.