您好朋友,我尝试在封面上制作渐变效果照片。但链接无效。
当您单击图片时,我想重定向到另一页。
这是我的演示JSFiddle
HTML代码:
<div class="container">
<a href="www.facebook.com"><img src="http://lorempixel.com/1920/480/"> </a>
</div>
CSS代码:
body {
background: #000;
}
.container {
max-width: 1920px;
background-image: -moz-linear-gradient(270deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 95% );
background-image: -webkit-linear-gradient(270deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 95% );
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 95% );
}
img {
max-width: 100%;
position: relative;
z-index: -1;
}
最佳答案
将链接包装在容器周围:
<a href="www.facebook.com"><div class="container">
<img src="http://lorempixel.com/1920/480/" />
</div></a>
Working Fiddle
关于html - CSS渐变图像链接不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/22518803/