Question

尝试使背景图片可点击。我使用了以下：<a href="http://goggle.com" title="me Consulting" id="range-logo"></a>作为html代码和以下内容：

#range-logo {
    background-image:url(http://midwaycinema7.com/wp-content/uploads/2015/12/home-specialism-section-2.jpg);
    display:block;
    height:600px;
    width:1240px;
}

作为CSS代码。

我能够实现使背景图像可点击，但重复的图像不是我想要的。我希望图像是全屏的，而不是重复任何device (responsive)。实现这一目标的代码将是有帮助的。提前致谢。

JSFiddle：https://jsfiddle.net/qfpqdzk2/

PS：尝试在wordpress上实现这一点。

Answer 1

请检查此链接：https://ran.ge/2009/11/11/css-trick-turning-a-background-image-into-a-clickable-link/

＆＃13;

#range-logo {
    background-image:url(http://midwaycinema7.com/wp-content/uploads/2015/12/home-specialism-section-2.jpg);
    display:block;
    height:500px;
    text-indent:-9999px;
    width:613px;
}

＆＃13;

<a href="http://midwaycinema7.com/about" title="me Consulting" id="range-logo"></a>

＆＃13;

Answer 2

此修复程序特定于此图像，因为它具有白色背景

＆＃13;

#range-logo {
margin:0 auto;
  background-image: url(http://midwaycinema7.com/wp-content/uploads/2015/12/home-specialism-section-2.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  max-width:100vh;
  height: 100vh;
  width: 1240px;
}

＆＃13;

<a href="http://midwaycinema7.com/about" title="me Consulting" id="range-logo"></a>

＆＃13;

Answer 3

您可以在背景图像上创建透明的悬停状态，然后在HTML中调用悬停状态的情况下，可以将其包装在锚定标记中。

.hover-state {
    position: absolute;
    top: -1px;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    width: auto;
    opacity: 0;
    padding:  0;
    transition: .5s ease;
    opacity: 0;
    @include respond ("altmax-1024") {
        opacity: .4;
    }
    &--transparent {
        background-color: transparent;
    }
}

.hover-state-item:hover .hover-state--transparent {
    opacity: 0;
}

背景图片可点击＆amp;响应

3 个答案: