Question

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

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

Answer 1

但是，它需要第二个元素（不是图像，只是元素）。伪元素方法不起作用，因为它的不透明度无法动画。

<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和过滤器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 3

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

也许，最终，当您可以使用HLSL或类似方式自定义编程CSS过滤器时...
但就目前情况而言，即使是近期未来的CSS过滤器，我也不认为他们会提供丝网，然后，你需要担心这一点，以及转型效果，然后你需要担心浏览器支持，其他浏览器的2图像回退......

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

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张照片，但至少可以很容易地为任何图像复制此效果，无论您在其下的原始图像是什么。那会有意义吗？

Answer 6

感谢您关注我们的网站。

您可以使用精灵技术。

http://www.alsacreations.com/tuto/lire/1068-sprites-css-background-position.html 也用于http://nordik.org/

上的“DECOUVREZ LA PROGRAMMATION”图像

非常简单的使用;）

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

6 个答案: