How to change the properties of a directly imported image in CSS?

Asked

Viewed 682 times

1

Let’s say you set an image as the background of a div as follows:

#div {
  background: #111111 url(../imagens/imagem1.jpg) top center;
  background-size: cover;

How do I change the properties of this image for example:

filter: grayscale(100%);
opacity: 0.2;

Is it possible to make these changes only in the image? Because if you add those lines along with the other code part, the changes will be made throughout Div, and that’s not what I want.

html css background

  • I think when you use a div and use an image as background, your element is a div, so you have 2 paths, create a div only for the image and another as wrapper, or use the html img tag.

3 answers

1

Guy just put everything in the pseudo element ::after of div for example, the image may be like BG does not need to be a <img> within the div

h1 {
    color: red;
}
div{
    width: 200px;
    height: 200px;
    position:relative
}
div::after {
    content: "";
    width: 100%;
    height: 100%;
    background-image: url(http://placecage.com/200/200);
    filter: grayscale(100%);
    opacity: 0.5;
    position:absolute;
    z-index:-1;
    top:0;
    left:0;
}
<div>
    <h1>Teste</h1>
</div>

0

Estates filter and opacity are not applicable to background images, only to elements such as a div, for example. If you want a background image with opacity 0.2, would have to create a GNP with the alpha in 20%.

But there is a gambiarra shape in which you can emulate a background image creating a layer with position absolute with an element <img>, then you can apply the properties to the element <img> independently of div.

Example:

#div{
   width: 300px;
   height: 200px;
   color: red;
   position: relative;
}

#div img{
   filter: grayscale(100%);
   opacity: 0.2;
   position: absolute;
   left: 0;
   width: 100%;
   z-index: -1;
}
<div id="div">
   <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
   <p>texto texto<p>
</div>

0

You are assigning the properties of div with:

#div {
  background: #111111 url(../imagens/imagem1.jpg) top center;
  background-size: cover;
  filter: grayscale(100%);
  opacity: 0.2
}

So that the image stays with the behavior independent of <div> use <img> within a div instead of background: #111111 url(../imagens/imagem1.jpg) top center.

Behold:

<html>
    <head>
    <style>
    img {
        opacity: 0.5;
        filter: alpha(opacity=50); /* For IE8 and earlier */
    }
    
    img:hover {
        opacity: 1.0;
        filter: alpha(opacity=100); /* For IE8 and earlier */
    }
    div {
        background-color: black;
        opacity: 1.0;
        width:600px;
        height: 100px;
    }
    </style>
    </head>
    <h1>Image Transparency</h1>
    
    <div><img src="http://placecage.com/200/200" alt="nothing" width="170" height="100"></div>
    
    </body>
    </html>

Browser other questions tagged html css background

You are not signed in. Login or sign up in order to post.