1

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?

Johnyb
  • 980
  • 1
  • 12
  • 27
  • 1
    The `filter` property doesn't work in all browsers. Did you try using `-webkit-filter: brightness(0.5)`? –  May 19 '16 at 20:03
  • possible duplicate of http://stackoverflow.com/questions/15765550/darkening-an-image-with-css-in-any-shape – Alp May 19 '16 at 20:13
  • filter, opacity, mix-blend-mode, filter + svg , ... many method could be used, but we have no idea of color and opacity of your png, nor the css , design in action around it you get guesses as answers :) – G-Cyrillus May 19 '16 at 20:17
  • @AustinKilduff Is it possible to use brigthness only one of the background images? I am using two right now but want the brightness only affect the first one. – Johnyb May 19 '16 at 21:44

2 Answers2

0

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

jjbandit
  • 26
  • 2
0

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');
}
AkashBhave
  • 749
  • 4
  • 12