With CSS is it possible to merge two Images?

Navigation
4

I saw this and wondered if it would be possible to merge two images with only CSS.



Isthereanywaytocontrolthispartialtransparencyofoneimageoveranother,orofanimageoverabackgroundortext?

Itriedwithopacity,butitdidnotevencomeclosetothedesiredeffect,becauseitdoesnothavethe"merge" of one image merging in the other. 

body {
  margin: 0;
  padding: 0;
}
main {
  position: relative;
}
.bg1,
.bg2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-repeat: none;
  background-position: center;
}

.bg1 {
  background-image: url(https://unsplash.it/600x400/?image=881);
}

.bg2 {
  background-image: url(https://unsplash.it/600x400/?image=902);
  opacity: .5;
}
<main>
  <div class="bg1"></div>
  <div class="bg2"></div>
</main>
    
asked by anonymous 13.12.2018 / 11:50

2 answers

1

img {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
}
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />

Use CSS mask-image, see below.

Example where the image has an opacity gradient from right to left.

The opacity parameter can be changed here rgba (0, 0, 0, 1) , where 1 is the maximum visible.

Apply in the direction you need in the other images (to left, to right, to bottom, ...) 

img  {
   -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1), rgba(0,0,0,0)));
}
    
13.12.2018 / 15:25
-1

You can use RGBA in your backgroud, and set the transparency at the end, for example

attribute { background-color: rgba (50,50,100, 0.5) - where 0.5 would be the amount of transparency applied.

    
13.12.2018 / 14:54
Delphi XE8 and Firemonkey: Integration between webbrowser javascript and system How to do multiple inserts at one time?