3

Is it possible to create an alpha mask like this in CSS (f.ex: http://www.script-tutorials.com/demos/360/images/twinkling.png) and then apply it to the background image below?

EDIT: I will give some more background because I think I am getting answers to a different question. The image linked above works overlapping some black circles on top of an image. The problem is that it always uses black colours, and if the background image has a black bakground, it works fine (it hides the bg image). The problem comes if the background image has, f.ex. a blue background. Then the image will overlap black circles over the bg image, and it will not create the effect of the intended masking. To give an idea:

example

So what I am trying is to get the circles as an alpha channel, that work on the image below. So not black with transparency, but black and white like an alpha channel that is applied to the image below.

Note that there will be 2 layers: for example the kiwis in one image with transparent background and below a black background. Or the dog in an image and below another blue image. So what I need is a mask that applies to the kiwi or the dog image.

Community
  • 1
  • 1
user1156544
  • 1,725
  • 2
  • 25
  • 51
  • You can try using `opacity` property of CSS3. opacity can be vary from 0.0 to 1.0. example `.image{ opacity:0.3; }` – Jijo Cleetus Mar 02 '17 at 11:35

3 Answers3

1

You can create a "div" that has an image background, and then apply an overlay over it:

HTML:

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

CSS:

.myDiv{
  height:333px;
  width:333px;
  background:url('https://www.catamaransailing.holiday/blog/wp-content/uploads/2015/10/saltwistlebay-3-333x333.jpg');
}
.overlay{
  position:relative;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.3);
}

Fiddle here: https://jsfiddle.net/x0n9hj4z/

Hope that is what you wanted.

Theo Orphanos
  • 1,417
  • 1
  • 19
  • 27
0

Here's my solution:

figure {
  position: relative;
}
.ink::after {
  content: url(http://www.script-tutorials.com/demos/360/images/twinkling.png);
  opacity: 0.5;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  display: block;
}
<figure class="ink">
  <img src="http://placehold.it/100x100">
</figure>

Unfortunately, most browsers do not support pseudo-elements on img tag.

Community
  • 1
  • 1
Tymek
  • 3,000
  • 1
  • 25
  • 46
0

Try the mask-image (and -webkit-mask-image) properties. They require either of these as a value:

[General tutorial for masking]

Your choice would probably be png or svg images, as the circles don't seem perfectly circular.

I suggest using the MDN resources for reasons outlined by a commenter.

sisisisi
  • 481
  • 7
  • 17