CODEWITHSUNDEEP
css
Johnyb
Johnyb

Reputation: 1316

Darken png image

I have an png image that is triangle shaped , i need this image to be more dark , i get the job done using another div with opacity 0.5 that covers it e.g

<div class ="cover_photo">
  <div class ="overlay"></div>
</div>

  .overlay {
    background-color: #322D36 ;
     bottom: 0;
     left: 0;
     opacity: 0.5;
     position: absolute;
     right: 0;
     top: 0;
     z-index: 1;
}

the cover_photo has said img set as background , but using this , the color from overlay will be seen on whole div , not just on the image and thas not what i want. Is there a way how to darken an image? I know about filter css property but none of them actually darken the image. Is tehre any way to achieve it?

Upvotes: 1

Views: 574

Answers (2)

AkashBhave
AkashBhave

Reputation: 749

You could just apply a linear-gradient to the image. Since you don't actually want a gradient, just set both values of the gradient equal. Here is an example of what I am talking about:

background:
    /* gradient */ 
    linear-gradient(
      rgba(0, 0, 0, 0.7), 
      rgba(0, 0, 0, 0.7)
    ),
    /* image */
    url('Add a URL here');
}

Upvotes: 0

jjbandit
jjbandit

Reputation: 26

You could do something like:

.red-triangle {
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

This is basically setting the bottom border to be really fat, then trims off the sides with transparent border-left and border-right props. You could presumably also add border-radius properties to get rounded corners, but I haven't tried this.

It might just be easier to use a bitmap editor or something to darken it. Alternatively, if you're looking to do dynamic (or automated) processing, check out imagemagick

Upvotes: 0

Related Questions