HTML 和 CSS：使用背景图片作为可点击链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25422241/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 02:32:08 来源:igfitidea点击:
HTML and CSS: using background image as a clickable link
提问by user25976
I'm trying to use a html and css trick to give the impression of using a background image as a clickable link following this tutorial. I can't get to work, however, due to two issues:
我正在尝试使用 html 和 css 技巧来给人一种使用背景图像作为遵循本教程的可点击链接的印象。但是，由于两个问题，我无法上班：
1) The link is not filling the space of the background image
1）链接没有填满背景图片的空间
2) The link will not move off the screen
2）链接不会移出屏幕
I'm using an html code integration block for a weebly website. I'm a beginner to html and CSS.
我正在为 Weebly 网站使用 html 代码集成块。我是 html 和 CSS 的初学者。
<a href="website.net/link" title="photo" id=?photo?>photo</a>
<a class="photo"></a>
<style type="text/css">
.photo {
background-image: url(myImageLink.jpg);
background-size: 300px;
background-repeat: no-repeat;
background-position: center;
border-radius: 50%;
background-clip: border-box;
transition: background-size 0.2s;
transition-timing-function: cubic-bezier(.07,1.41,.82,1.41);
display: block;
width: 190px;
height: 190px;
text-decoration: none;
cursor: pointer;
overflow: hidden;
text-indent: 100%;
white-space:nowrap;
}
.photo:hover {
background-size: 500px;
}
</style>
回答by 4dgaurav
You need a single <a>tag, style a background to it, give required href to it and make it display: block
您需要一个<a>标签，为其设置背景样式，为其提供所需的 href 并制作它display: block
html
html
<a class="photo" href="website.net/link" title="photo" id="photo">photo</a>
css
css
.photo {
background-image: url('http://www.thinksnaps.com/wp-content/uploads/2014/07/images-background.jpg');
background-size: 300px;
background-repeat: no-repeat;
background-position: center;
border-radius: 50%;
background-clip: border-box;
transition: background-size 0.2s;
transition-timing-function: cubic-bezier(.07,1.41,.82,1.41);
display: block;
width: 190px;
height: 190px;
text-decoration: none;
cursor: pointer;
overflow: hidden;
text-indent: 100%;
white-space:nowrap;
}
.photo:hover {
background-size: 500px;
}
回答by Roy Sonasish
check your html code it should be like this
检查你的html代码它应该是这样的
<a class="photo" href="website.net/link" title="photo" id="photo">photo</a>
回答by drugan
Another example how to use .svg images as clickable background. Note that the text on links is hidden by css but may be shown along with clickable .svg images after the text. If you need the images displayed before the text just change ::after pseudo-element for ::before in the snippet below.
另一个示例如何使用 .svg 图像作为可点击背景。请注意，链接上的文本被 css 隐藏，但可能会在文本后与可点击的 .svg 图像一起显示。如果您需要在文本之前显示图像，只需在下面的代码段中将 ::after 伪元素更改为 ::before 即可。
UPD:Added material design Google font icons as a clickable background example.
UPD：添加了 Material Design Google 字体图标作为可点击的背景示例。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Clickable background</title>
<!-- Citation from http://google.github.io/material-design-icons/#setup-method-1-using-via-google-web-fonts
Similar to other Google Web Fonts, the correct CSS will be served to
activate the 'Material Icons' font specific to the browser. An additional CSS
class will be declared called .material-icons. Any element that uses this
class will have the correct CSS to render these icons from the web font. -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style type="text/css" media="screen">
/* Make clickable text on links invisible. */
.clickable-background {
font-size:0;
}
.clickable-background:hover ::after, .clickable-background ::after {
content: '';
display:inline-block;
width: 48px;
height: 48px;
/*
The default clickable background image (mouse for PC) to display if no
background image is defined or it is crippled or not reachable. See the
`fill="rgb(255, 0, 0)"' key=value, this is the color (red) of the .svg image.
The width and height are defined above, so no need to change them in the source.
All the images are taken from: https://materialdesignicons.com/
*/
background: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" fill="rgb(255, 0, 0)" viewBox="0 0 24 24"><path d="M11,1.07C7.05,1.56 4,4.92 4,9H11M4,15A8,8 0 0,0 12,23A8,8 0 0,0 20,15V11H4M13,1.07V9H20C20,4.92 16.94,1.56 13,1.07Z" /></svg>');
}
/* Every image need to have its own rule defined. */
.stackoverflow-icon ::after{
background: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" fill="grey" viewBox="0 0 24 24"><path d="M17.36,20.2V14.82H19.15V22H3V14.82H4.8V20.2H17.36M6.77,14.32L7.14,12.56L15.93,14.41L15.56,16.17L6.77,14.32M7.93,10.11L8.69,8.5L16.83,12.28L16.07,13.9L7.93,10.11M10.19,6.12L11.34,4.74L18.24,10.5L17.09,11.87L10.19,6.12M14.64,1.87L20,9.08L18.56,10.15L13.2,2.94L14.64,1.87M6.59,18.41V16.61H15.57V18.41H6.59Z" /></svg>');
}
/*
The source of images is used instead of image files for the need to change
the color (and may be other svg values) on hover event. It seems a bit redundant
to duplicate the whole image source just for the case, but only foreground
.images can be changed in color with css `fill' property. Let us know if you
discover simpler way to do it. Otherwise you need to edit .svg file before using
it as a downloadable resourse which is the same what we do here.
See more reasons why the source of the .svg image is better than the link to it:
https://css-tricks.com/probably-dont-base64-svg/
*/
.stackoverflow-icon:hover ::after {
background: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" fill="blue" viewBox="0 0 24 24"><path d="M17.36,20.2V14.82H19.15V22H3V14.82H4.8V20.2H17.36M6.77,14.32L7.14,12.56L15.93,14.41L15.56,16.17L6.77,14.32M7.93,10.11L8.69,8.5L16.83,12.28L16.07,13.9L7.93,10.11M10.19,6.12L11.34,4.74L18.24,10.5L17.09,11.87L10.19,6.12M14.64,1.87L20,9.08L18.56,10.15L13.2,2.94L14.64,1.87M6.59,18.41V16.61H15.57V18.41H6.59Z" /></svg>');
}
.github-icon ::after{
background: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" fill="grey" viewBox="0 0 24 24"><path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" /></svg>');
}
.github-icon:hover ::after {
background: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" fill="blue" viewBox="0 0 24 24"><path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" /></svg>');
}
/* This rule MUST to be placed under all clickable background rules.*/
.clickable-background:hover ::after, .clickable-background ::after{
background-repeat: no-repeat;
background-size: contain;
}
/*******************************************************************************
Even better solution: clickable Google font material icons expessed as ligatures.
See the <link> tag above.
*******************************************************************************/
/* Make clickable text on links invisible. */
.material-icons {
font-size:0;
}
.material-icons a {
text-decoration: none;
}
.material-icons ::after {
font-size: 48px;
color: grey;
/*
The default clickable background image (crossed phone) to display if no
background image is defined or it is crippled or not reachable.
*/
content: 'phonelink_erase';
}
.material-icons:hover ::after {
color: blue;
}
/* Each clickable font icon need its own rule with the name of a ligature as content property value */
.material-icons.clickable-home ::after {
content: 'home';
}
.material-icons.clickable-thumb_up ::after {
content: 'thumb_up';
}
.material-icons.clickable-android ::after {
content: 'android';
}
.material-icons.clickable-important_devices ::after {
content: 'important_devices';
}
.material-icons.clickable-import_contacts ::after {
content: 'import_contacts';
}
.material-icons.clickable-phonelink_setup ::after {
content: 'phonelink_setup';
}
</style>
</head>
<body>
<p>Note that links below do not lead you to the sites linked because in the code snippet the default behaviour of links is disabled by stackoverflow.com. See the browser status bar and cursor type when hover over links. For actual testing just copy the whole snippet and create your own test.html file.</p>
<span class="clickable-background stackoverflow-icon">
<a href="http://stackoverflow.com" title="Stackoverflow" target="_blank">Stackoverflow - sounds good, but the icon is better.</a>
</span>
<span class="clickable-background github-icon">
<a href="https://github.com/" title="Github" target="_blank">Github - sounds good, but the icon is better.</a>
</span>
<p>May be even better solution is to use clickable font symbols. Read more about this cool feature on the links below.</p>
</span>
<span class="material-icons clickable-home">
<a href="http://google.github.io/material-design-icons/" title="Material design icons" target="_blank">Material design icons</a>
</span>
<span class="material-icons clickable-thumb_up">
<a href="https://design.google.com/icons/" title="Download material icons" target="_blank">Download material icons</a>
</span>
<span class="material-icons clickable-android">
<a href="https://developers.google.com/fonts/" title="Google fonts" target="_blank">Google fonts</a>
</span>
<span class="material-icons clickable-important_devices">
<a href="http://alistapart.com/article/the-era-of-symbol-fonts/" title="Symbol fonts" target="_blank">The Era of Symbol Fonts</a>
</span>
<span class="material-icons clickable-import_contacts">
<a href="https://material.google.com/style/icons.html" title="Material icons' geometric shapes" target="_blank">Material icons' geometric shapes</a>
</span>
<span class="material-icons clickable-phonelink_setup">
<a href="https://github.com/google/material-design-icons/blob/master/iconfont/codepoints/" title="Code points reference" target="_blank">Code points reference</a>
</span>
</body>
</html>