How can i change background image opacity without changing on div content? [duplicate]


Tags: css,css3,opacity

Problem :

This question already has an answer here:

I want know that "How can i change background image opacity without changing on div content?"

I searched too much & I don't find a good answer to solve this issue!

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


Solution :

Because all children of an element are affected by its CSS, you cannot simply set the opacity of a background-image, however, there are several workarounds to this:

1. Use transparent background images (easiest imo)

Rather than setting the background image's opacity after the fact, just make the background image transparent in your favorite image editor (try gimp, it's free!) and save it as an image with transparency (like PNG).

2. Use positioning.

If you make the parent element have relative positioning and absolutely position child elements inside, you take them out of the flow and they will not be affected by the opacity of the parent. [Source]

3. Use sibling elements in the same position

If you separate the content from the parent and make the two elements siblings, you can position the elements that were children over the parent with z-indexing and set the opacity of the parent without affecting the child.


There are more, but one of those should get you what you want.


    CSS Howto..

    There is a little gap between the image and the overlay, I do not know how to fix it [duplicate]

    How to add a class to an element with CSS

    How can I move a div with direction in JavaScript?

    How to modify divs in grid template site?

    Codeigniter: how to access css files from different views?

    How to wrap long lines without spaces in HTML?

    How to tune CSS with Isotope to display top border?

    How do I apply CSS styling to a
    block?

    How to detect redraw rate (fps) of a css animation?

    How to make Flexbox span multiple lines?

    How * tag can be used in CSS?

    CSS - how to hide the top of a container using CSS-height, vertical-align and overflow?

    I want to make semi-identical manu like the one on this page - how? [closed]

    How do I align an item to the right inside a flex container?

    How can I fill the remaining space when dealing with an inline ul?

    How to break text in a line in a div by css?

    How do I load a nested web page in a
    tag using only javascript and html?

    How to achieve this complex layout with CSS?

    how to apply css to a specific element of a table?

    How to change dropdownlist width to 100% using CSS

    Using flexbox how do I prevent a specific element from inheriting flex layout?

    How to place kartik typeahead above text input

    How to fit img into div circle ?

    CSS - How to remove whitespace between anchored images

    How to vertically align text inside
  • in a CSS based drop-down menu?
  • How to create a custom shape - css

    How to get image info from css into MasterPage'gridview?

    How to reuse footer with only HTML/CSS?

    Show header below fixed nav when clicking hash tag link

    How to interpret HTML multiple class names in the CSS renderization? What W3C says about it?