0

我正在尝试做的一个很好的例子是 Fancy： http: //www.fancy.com/ 如果您将鼠标悬停在帖子的图像上，背景会变暗（达到一定百分比）并且前面会出现一个按钮.

我也想做同样的事情，但要使用 SHARE 按钮。我将图像作为 img 并将 SHARE 按钮作为背景。但是，我无法弄清楚如何在不使 SHARE 按钮变暗的情况下使图像变暗。

这是我的 HTML 代码：

<div class="src">
<img src="image.jpg" />
</div>

我的 CSS 代码：

div.src{
    width:100%; 
    height:100%; 
    background:url('icon-share.png') center center no-repeat;
    opacity: 1;
}
div.src img{
    width: 500px;
    min-height: 200px;
    opacity: 0.2;
}

你能帮我吗？

宽度始终为 500 像素，但高度是可变的（最小高度为 200 像素）。我也想使图像变暗而不是应用不透明度，但我认为这不是一个难题。

编辑：当然，单击整个图像将打开共享对话框。浮动的 SHARE 按钮只是通知用户他将要分享它。

4

1 回答 1

0

如果我们谈论的是纯 html 和 css，您可以在图像上方的图像支架内插入另一个<div>甚至一个。<a>

a.share {
    position:absolute;
    width:100%; height:100%;
    background:url(path to icon) rgba(0,0,0,0.75);
    background-repeat: no-repeat;
    background-position:center center;
}
于 2013-07-19T20:23:04.807 回答