背景图片可点击和响应

问题描述：

试图使背景图片可点击。我用如下：<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的。

尝试添加CSS代码'''background-repeat：no-repeat; background-position：center; background-size：cover;''' – Momin

答

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

#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; 
 
}

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

答

此修复程序是专门针对这一形象，因为它有一个白色的背景

#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; 
 
}

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

背景图片可点击和响应

相关推荐