如何使用CSS在图像上创建虚线阴影效果？

Question

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

我知道他们使用两个不同的图像，但我希望能够没有2个图像，只有一个图片（没有点的图片）和通过使用CSS的效果。可能吗 ？

Answer 1

Mikel，您无法使用CSS和单个图像实现丝印效果。以任何跨浏览器兼容的方式，这不会很快发生。当你可以使用HLSL或类似的方式自定义编程CSS过滤器时......也许，最终，当你可以使用HLSL或类似方法自定义编程CSS过滤器时......但是对于目前来说，即使使用接近未来的CSS过滤器，我也不认为他们将会提供丝印，然后，您需要担心这一点以及过渡效果，然后您需要担心浏览器支持，以及其他浏览器的2图像回退。

ie：你必须创建第二张图片，并写出你希望有CSS过滤器的2张图片后备，以避免首先制作第二张图片。

Answer 2

这是非常接近：http://jsfiddle.net/LfXN3/8/

但是，它需要一个第二元件（未形象，只是元素）。伪元素方法不起作用，因为它的不透明度不能动画。

<div> 
    <div id="overlay"></div> 
</div>​ 

CSS

div{ 
    background:url(http://placekitten.com/600/600) center center; 
    width:400px; 
    height:400px; 

    -webkit-transition:all 2s; 
    -webkit-filter: grayscale(100%); 
} 

div:hover{ 
    -webkit-filter: grayscale(0%); 
} 

div #overlay{ 
    opacity:.5; 
    display:block; 
    background: -webkit-linear-gradient(45deg, #777 25%, transparent 25%, transparent), -webkit-linear-gradient(-45deg, #777 25%, transparent 25%, transparent), -webkit-linear-gradient(45deg, transparent 75%, #777 75%), -webkit-linear-gradient(-45deg, #000 75%, #777 75%); 

    background-size:2px 2px; 
    width:400px; 
    height:400px; 

    -webkit-transition:opcaity 2s; 
} 

div:hover #overlay{ 
    opacity:0; 
} 

我已经成功地获得通过将达德利·斯托里的技术为矿山那点点接近：http://jsfiddle.net/LfXN3/14/

的主要区别是这样的：

div #overlay{ 
    opacity:1; 
    display:block; 
    background: -webkit-radial-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,0.4) 46%), 
-webkit-radial-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,0.4) 46%), 
    url(http://placekitten.com/600/600); 
    background-position: 0 0, 2px 2px, center center; 
    background-size:4px 4px, 4px 4px, 600px 600px; 
    width:400px; 
    height:400px; 

    -webkit-transition:opacity 2s; 
} 

Answer 3

尽管可以使用css3 g将彩色图像转换为灰度图reyscale过滤器，它目前只适用于Chrome。

-webkit-filter: grayscale(100%); 

无需使用jQuery即可获得该效果的解决方法是使用两个图像和css3转换。

-webkit-transition: opacity 0.5s; 
-moz-transition: opacity 0.5s; 
-o-transition:  opacity 0.5s; 

Answer 4

如何使用原始图片（不点），只是做一个小点的另一幅图像（像http://www.scottecatalog.com/images.nsf/Images/dot/ $ FILE/Dot.gif）和一个带有重复属性，各地重复点原始图像与点之间具有正确的空间并具有z-index属性（以便将点放置在原始图像的字体中）？

我们仍在使用2张照片，但至少对任何图像复制这种效果都很容易，无论您使用的是哪种原始图像。 会有道理吗？

Answer 5

是的，可以用一个单一的图像，使用普通的CSS3和一个过滤器：demo, and a brief explanation, on my blog。现在，Firefox中的灰度到颜色转换看起来特别慢（因为它必须使用与过滤器相同的SVG），所以我暂时将它从演示中删除。

div#silkscreen { 
background: 
-webkit-radial-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,0.4) 46%), 
-webkit-radial-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,0.4) 46%), 
url(lotus.jpg); 
background: -moz-radial-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,0.4) 46%), 
-moz-radial-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,0.4) 46%), 
url(lotus.jpg); 
background-position: 0 0, 2px 2px; 
background-size:4px 4px, 4px 4px, cover; 
-webkit-filter: grayscale(1); 
filter: url(desaturate.svg#greyscale); 
filter: grayscale(1); 
transition: 1.3s; 
} 
div#silkscreen:hover { -webkit-filter: grayscale(0); filter: none; } 
div#silkscreen img { max-width: 100%; opacity: 0; }} 
div#silkscreen:hover { -webkit-filter: grayscale(0); } 
div#silkscreen img { max-width: 100%; opacity: 0; } 

<div id=silkscreen> 
<img src=lotus.jpg alt=""> 
</div> 

我希望这有助于！

Answer 6

感谢您对我们网站的关注。

您可以使用sprite技术。

http://www.alsacreations.com/tuto/lire/1068-sprites-css-background-position.html 也用 “DECOUVREZ LA PROGRAMMATION” 的形象上http://nordik.org/

很简单TU使用;）