opacity for div background and not for content

Question

opacity for div background and not for content

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

-1

Good evening I have a div with a background-image but I want to put opacity (at least its effect) for that image. If I put it on the div, the opacity affects everything I put into it. Is there any way to do it without modifying the image?

Thank you very much

css

asked by Gema 18.05.2017 в 22:03

source

3 answers

I want to create this project with my own list Add an item of a spinner inside a table and show information of spinners depending on one previously selected

score 0 · Answer 1

I recommend that you process the image with Photoshop and put the opacity you want and save it as PNG that retains the alpha value (transparency), at a syntactic level it is cleaner.

If you do not like this option you could create two for the background and one for the text, and give different "class" to each div, and with CSS opacity: 0.5; to the bottom.

score 0 · Answer 2

If I understood correctly, I think you want to do something like this ...

div {width: 500px; height: 500px; display: block; position: relative;}
div::after {content: ""; background: url(image.jpg); opacity: 0.5; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; }

I hope you serve

score 0 · Answer 3

To do what you want, you can use the property ::before of CSS .

In ::before you can show the image and apply the opacity you want without affecting the div.

This is an example:

body
{
  background: url(//image.freepik.com/free-vector/triangular-background_23-2147508098.jpg) center center;
  
  background-color: #ccc;
}
.myDiv {
  position: relative;
  z-index: 5;
  height: 250px;
  width: 300px;
  color: #FFF;
  font-size: 400%;
  padding: 20px;
}

.myDiv::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(//files.ctctcdn.com/77be3546001/91b996da-b256-4ec5-9a6e-5bf92c3922d0.jpg) center center;
    opacity: .7;
}

<div class="myDiv">
    Hello, I am a DIV :)
</div>