html - 在 tumblr 布局中使用 css 和 html 制作图像可点击链接

Question

我试图在 Tumblr 布局中制作背景 image clickable，但由于某种原因它没有这样做。一切都出现了，但图片不可点击。

HTML

<div class="image-swap-auto">
  <a id="auto-link" href="http://steamologist.com/auto_detailing"></a>
</div>

CSS

.image-swap-auto {
   position: relative;
   background-image: url(http://i174.photobucket.com/albums/w101/shakadoodoo/steamology_services_table_auto_long_zpslpwwv17n.jpg);
   background-repeat: no-repeat; 
   display:block;
   height: 210px;
   width: 210px;
}

#auto-link {
   position: absolute; 
   width: 210px;
   height: 210px;
   background-color: transparent; 
}

.image-swap-auto:hover {
background-position: 0 100%;
}

这是我要修复的网页的 url.....

http://steamologist.com/auto_detailing

Answer 1

欢迎来到 SO。

只需将 div 放在您的 anchor 中即可。

.image-swap-auto {
   background-image: url(http://i174.photobucket.com/albums/w101/shakadoodoo/steamology_services_table_auto_long_zpslpwwv17n.jpg);
   background-repeat: no-repeat; 
   display:block;
   height: 210px;
   width: 210px;
}

#auto-link { 
}

.image-swap-auto:hover {
  background-position: 0 100%;
}

<a id="auto-link" href="http://steamologist.com/auto_detailing">
  <div class="image-swap-auto"></div>
</a>

或者，如果您想修补，这里有一个相关的 Codepen

希望这对您有所帮助，祝您周末愉快!