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

Question

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

我知道他们使用两张不同的图像，但我希望能够在没有 2 张图像的情况下实现这种效果，只需一张图片（没有圆点的那张）并使用 CSS。是否可以 ？

Answer 1

这非常接近：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;   
}

通过将 Dudley Storey 的技术融入我的技术中，我设法让这一点更接近：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 2

是的，可以在我的博客上使用纯 CSS3 和过滤器：演示和简要说明，使用单个图像来完成。现在，在 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 3

Mikel，您无法使用 CSS 和单个图像来实现丝印效果。
它不会以任何跨浏览器兼容的方式很快发生。

也许，最终，当您可以使用 HLSL 或类似工具自定义编程 CSS 过滤器时......
但就目前而言，即使使用近乎未来的 CSS 过滤器，我认为他们不会提供丝绸-screen，然后，您需要担心这一点，以及过渡效果，然后您需要担心浏览器支持，以及其他浏览器的 2-image 后备...

即：您必须首先创建第二张图像并编写您希望有一个 CSS 过滤器的 2 张图像后备，以避免制作第二张图像。

Answer 4

虽然可以使用 css3 灰度滤镜将彩色图像转换为灰度，但它目前仅适用于 Chrome。

-webkit-filter: grayscale(100%);

在不使用 jQuery 的情况下获得该效果的一种解决方法是使用两个图像和 css3 过渡。

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

Answer 5

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

我们仍在使用 2 张图片，但至少可以轻松地为任何图像复制此效果，无论您在其下拥有什么原始图像。这有意义吗？