How can I change the opacity of an image without changing the contents of the div?

Question

I want to know that "How can I change the opacity of a background image without changing the contents of the div?"

I searched too much and I did not find a good answer to solve this problem!

HTML

<div class="div-1">
    <h2>title</h2>
    <p>text</p></div>

CSS

.div{
position:relative;
width:200px;
height:200px;
float:left;
color:white;
background:#7a8586 url('url') no-repeat local right;
overflow:hidden;
text-align: justify;
font-family:arial;
font-size:14px;}

Answer 1

Since all children of an element are affected by its CSS, you cannot just set the opacity of the background image, however there are a few workarounds:

1. Use transparent background images (the simplest imo)

, , ( gimp, !) (, PNG).

2. .

, , . []

3.

, , , z- , .

---

, , .

Answer 2

DEMO

.

Css:

.has-bg-img{
    position: relative;
}
.has-bg-img:after {
    content:'';
    background: url('http://placehold.it/500x100') no-repeat center center;
    position: absolute;
    top:0px;
    left: 0px;
    width:100%;
    height:100%;
    z-index:-1;
    opacity: 0.2; /* Here is your opacity */
}

Answer 3

CSS- CSS, , , .

,  http://css-tricks.com/snippets/css/transparent-background-images/

Answer 4

.....

 <div style="position:relative; ">      
      <div style=" background-image:url(url); opacity:0.5;filter:alpha(opacity=40);height:520px; width:520px;"></div>

       <div style="position:absolute; top:10px; z-index:100;left:10px;height:500px;idth:500px;">
            Your Div Contents are  Here..................
       </div>
    </div>