Question

我正在使用带有超链接的图片，如下所示

<div class="image">
    <div class="f_image">
        <a href="1.html"><img src="http://www.portlandmercury.com/binary/e64e/food1-570x300.jpg"/></a>
    </div>
    <div class="image-gradient"></div>
</div>

从上面的html代码中，我的图片1.jpg可以使用可点击的超链接正常工作。

我想使用<div class="image-gradient"></div>在该图像上添加背景渐变效果。因此，在执行渐变效果后，图像显示但不是可点击的图像。我尝试了z-index，但图像渐变消失了。有谁可以帮助我？

我的css代码是，

.image {
    position: relative;
}

.image-gradient{
    position: absolute;
    color: #fff;
    padding: 1em;
    width: 100%;
    bottom: 0px;
    top: 0px;
    left: 0px;
    background: -moz-linear-gradient(top, rgba(51,51,51,0) 0%, rgba(51,51,51,0.9) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(51,51,51,0)), color-stop(100%,rgba(51,51,51,0.9)));
    background: -webkit-linear-gradient(top, rgba(51,51,51,0) 0%,rgba(51,51,51,0.9) 100%);
    background: -o-linear-gradient(top, rgba(51,51,51,0) 0%,rgba(51,51,51,0.9) 100%);
    background: -ms-linear-gradient(top, rgba(51,51,51,0) 0%,rgba(51,51,51,0.9) 100%);
    background: linear-gradient(to bottom, rgba(51,51,51,0) 0%,rgba(51,51,51,0.9) 100%);
}

Answer 1

检查this可以帮助您。

HTML

<div class="f_image">
<a href="1.html">
   <img src="http://www.hdwallpapers.in/walls/sachin_tendulkar-normal.jpg"/>                                   <span class="image-gradient"></span>
   </a>
</div>

CSS

.f_image a {
  z-index: 1;
  position: relative;
  display: block;
  float: left;
}
.f_image img {
position: relative;
  max-width: 200px;
}

.image-gradient{
position: absolute;
  z-index: 1;
color: #fff;
padding: 1em;
width: 100%;
bottom: 0px;
top: 0px;
left: 0px;
background: -moz-linear-gradient(top, rgba(51,51,51,0) 0%, rgba(51,51,51,0.9) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(51,51,51,0)), color-stop(100%,rgba(51,51,51,0.9)));
background: -webkit-linear-gradient(top, rgba(51,51,51,0) 0%,rgba(51,51,51,0.9) 100%);
background: -o-linear-gradient(top, rgba(51,51,51,0) 0%,rgba(51,51,51,0.9) 100%);
background: -ms-linear-gradient(top, rgba(51,51,51,0) 0%,rgba(51,51,51,0.9) 100%);
background: linear-gradient(to bottom, rgba(51,51,51,0) 0%,rgba(51,51,51,0.9) 100%);
}

Answer 2

试试这个..

  margin-top:-25px;

而不是

position: absolute;

小提琴：http://jsfiddle.net/Z565B/

在css中使用线性背景渐变效果后超链接无法工作的图像

2 个答案: