如何使用CSS在图像上创建点状阴影效果？ [英] How to create a dotted shadowy effect on an image with CSS?

问题描述

我想创建可在网站上看到的效果 http://www.murmure.me/ 。当你悬停在他们的图片上时。

I would like to create the effect that can be seen on the website http://www.murmure.me/ when you hover on their images.

我知道他们使用两个不同的图片，但我想能够没有2张图片， （没有点的一个）和使用CSS。可能吗 ？

I know They use two different images but I would like to be able to this effect without 2 images, just with ONE picture (the one without the dots) and by using CSS. Is it possible ?

推荐答案

Mikel，使用CSS和单个图片无法实现丝网效果。
$ b $

Mikel, you can't achieve a silk-screen effect using CSS and a single image.
It's not going to happen any time soon, in any cross-browser compatible way.

也许最终，当你可以使用HLSL或类似的自定义程序CSS过滤器。 ..

但是对于时间，即使使用近乎未来的CSS过滤器，我也不认为他们会提供丝印，那么你需要担心，连同过渡效果，然后你会需要担心浏览器支持，与其他浏览器的2图像回退...

Maybe, eventually, when you can custom-program CSS filters using HLSL or similar...
But for the time-being, even with near-ish-future CSS-filters, I don't think that they're going to offer silk-screen, and THEN, you'd need to worry about that, along with the transition effects, and THEN you'd need to worry about browser support, with 2-image fallbacks for other browsers...

ie ：你必须创建第二个图像，并写入你希望有一个CSS过滤器的2图像回退，以避免第一个图像。

ie: you'd have to create the 2nd image and write the 2-image fallback which you were hoping there was a CSS filter for, to avoid making the 2nd image, in the first place.

这篇关于如何使用CSS在图像上创建点状阴影效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！