Question

当图像悬停时，我正试图在图像上叠加透明PNG。我希望它是语义的，即我不想为了样式或可用性而向HTML添加不必要的元素和图像。

这是我的图像元素

<li class="cover-image"><img src="image.png" width="700" height="250"></li>

这是我尝试过的CSS

#covers li ul .cover-image
{
margin: 10px 0;
display: block;
width: 700px;
height: 250px;
}

#covers li ul .cover-image img:hover
{
background: url('../images/cover-overlay.png') top left no-repeat;
}

有没有办法在不向HTML添加额外图像的情况下执行此操作？

Answer 1

问题是img显示在li之上。因此，我认为没有办法让li显示img的“顶部”。在这种情况下，我会使用JavaScript来添加您正在寻找的效果。

I've created a JSFiddle you can look at for reference，我将在下面解释：

首先，我设置了一些类似于上面描述的标记：

<ul>
    <li class="cover-image"><img src="http://www.gravatar.com/avatar/3114d84a5c5144b2a531c610c913bdb9?s=128&d=identicon&r=PG" width="700" height="250"></li>
</ul>

然后我使用类似的CSS，添加了新的span.over声明：

ul li.cover-image span.over
{
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 700px;
    height: 250px;
    z-index: 32;
    background-image: url('http://shipsstarthere.ca/img/trans-bg.png');
    pointer-events: none;
}

span此处包含一个半透明的png图像，该图像将用于叠加层。默认情况下，span不会显示，但只有当用户将鼠标悬停在图片上时，我们才能使用JavaScript添加它。

这是JavaScript（使用jQuery），我用过：

$(document).ready(function() {
    $('ul li.cover-image img').hover(function() {
        $('ul li.cover-image').append('<span class="over"></span>');
    }, function() {
        $('ul li.cover-image span').remove();
    });
});

再次，take a look at the JSFiddle example。它显示了这是如何工作的，并使默认标记稍微不那么杂乱。

Answer 2

您可以从两个单独的图像中创建一个精灵（一个在另一个之上）并执行以下操作：

HTML：

<li class="cover-image"></li>

的CSS：

#covers li ul .cover-image {
   background-image: url('sprite.png') 0 0 no-repeat;
   width: 700px;
   height: 250px;
}

#covers li ul .cover-image:hover {
   background-position:0px -250px;
}

Answer 3

我会在父div中添加背景颜色，并在悬停时更改不透明度：

http://jsfiddle.net/7VpKA/

<div><img src="http://placehold.it/350x150"></div>

div {
    background:#000;
    width:350px;
    height:150px;
}

div img:hover {
    opacity:0.8;
}

Answer 4

我认为最简单的方法是添加div overlay元素。我知道这不是你想要做的，但是图像没有'叠加'css功能。

  <li class="cover-image"><div class='overlay'></div><img src="image.png" width="700" height="250"></li>

#covers li ul .cover-image
{
    position:relative;  
    margin: 10px 0;
    display: block;
    width: 700px;
    height: 250px;
}

.overlay{
    width:100%; 
    height:100%; 
    position:absolute;
    z-index:50;
}  

#covers li ul .cover-image:hover .overlay //notice selector edit
{
    background: #fff url('../images/cover-overlay.png') top left no-repeat;
}

CSS Overlay IMAGE Hover

4 个答案: