Is it possible to leave part of image transparent with css?

Navigation
2

Is it possible to make a photo gradient to transparent at the bottom of an image using only css?

Example:

    
asked by anonymous 19.03.2018 / 20:57

1 answer

1

Do something similar using a mixture of Filters and Blend Modes, but the end of the image will never be 100% transparent.

Here is an example of the applied technique, which needs adjustments to stay within your "acceptance pattern" ... (treated and original image alongside). 

html, body {
    width: 100%;
    height: 100%;
    margin: 10px;
    padding: 0;
}
body {
    background-image: url(http://placecage.com/11/11);
}
* {
    float: left;
}
.cont {
  width: 300px;
  height: 300px;
  position: relative;
  z-index: 1;
}
.cont .branco {
  background-image: linear-gradient(to top, rgba(255,255,255,1) 40%,rgba(255,255,255,0) 100%);
  width: 300px;
  height: 300px;
  position: relative;
  z-index: 0;
}
.cont .mix {
    position: absolute;
    z-index: 1;
    filter: opacity(40%);
    mix-blend-mode: multiply;
}
.cont .normalizer {
    mix-blend-mode: normal;
}
.cont .filtros {
    position: absolute;
    z-index: 1;
    filter: contrast(120%) brightness(110%) opacity(50%);
    mix-blend-mode: multiply;
}
<div class="cont">
    <img class="mix"src="http://placecage.com/300/300"alt="">
    <img class="mix normalizer"src="http://placecage.com/300/300"alt="">
    <img class="filtros"src="http://placecage.com/300/300"alt="">
    <div class="branco"></div>
</div>

<img src="http://placecage.com/300/300"alt="">

One solution is to use two backgrounds in a div , but only works with solid colors. You will simulate a shading on the image that should have the same color as the background. In the example I used black.

See the result. 

html, body {
  background-color: #000;
}
.holder {
  background-image: linear-gradient(to top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%), url(http://placecage.com/300/300);
  width: 300px;
  height: 300px;
}
<div class="holder"></div>

OBS1: Consider using a .PNG , it's easy to do this in qq image editor! Because everything is not worth doing with CSS, this mix of filtros with blends causes the page to lose performance and is hardware accelerated ...

OBS2: Browser techniques and support. Filter is not supported by IE link and Mix-Blend-Mode is not supported by either IE or Edge link

    
19.03.2018 / 21:16
implode () vs substr () My code in C contains some errors (Data Structure List)