HTML和CSS：使用背景图像作为可点击链接

Question

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 . 我正在尝试使用html和css技巧给人留下使用背景图像作为本教程后的可点击链接的印象。 I can't get to work, however, due to two issues: 但是，由于两个问题，我无法开始工作：

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. 我正在为一个网站使用html代码集成块。 I'm a beginner to html and CSS. 我是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>

Answer 1

Demo 演示

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

Answer 2

Another example how to use .svg images as clickable background. 另一个示例如何使用.svg图像作为可点击的背景。 Note that the text on links is hidden by css but may be shown along with clickable .svg images after the text. 请注意，链接上的文本由css隐藏，但可能会在文本后显示可点击的.svg图像。 If you need the images displayed before the text just change ::after pseudo-element for ::before in the snippet below. 如果你需要在文本之前显示的图像只是在下面的代码片段中改变::之后的伪元素for :: before。

UPD: Added material design Google font icons as a clickable background example. UPD：添加了材料设计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>

Answer 3

检查你的HTML代码它应该是这样的

<a class="photo" href="website.net/link" title="photo" id="photo">photo</a>

HTML和CSS：使用背景图像作为可点击链接

问题描述

3 个解决方案

解决方案1
6 已采纳 2014-08-21 09:08:09

解决方案2
3 2016-09-13 16:11:08

解决方案3
2 2014-08-21 09:15:41

HTML和CSS：使用背景图像作为可点击链接

问题描述

3 个解决方案

解决方案1 6 已采纳 2014-08-21 09:08:09

解决方案2 3 2016-09-13 16:11:08

解决方案3 2 2014-08-21 09:15:41

解决方案1
6 已采纳 2014-08-21 09:08:09

解决方案2
3 2016-09-13 16:11:08

解决方案3
2 2014-08-21 09:15:41