Creating a CSS transparency mask over an image

Question

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:

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.

Answer 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.

Answer 2

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

• linear-gradient [W3Schools link][MDN link]
• radial-gradient[W3Schools link][MDN link]
• png image with transparent parts
• svg image with transparent parts

[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.