logo标签列表

HTML和CSS：如何将背景图片作为可点击链接使用

htmlcss
9
我正在尝试使用HTML和CSS技巧来实现将背景图像作为可点击链接的印象，遵循这个教程。然而，由于两个问题，我无法使其生效：
1）链接没有填充背景图像的空间。
2）链接无法移出屏幕。
我正在使用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>
翻译：在photo类名中缺少href-超链接。 - Punitha Subramani
3个回答
12

演示

你只需要一个单独的 <a> 标签，为其添加样式背景，赋予必要的 href 属性，并将其设置为 display:block

HTML

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

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;
}
1
适用于IE、Chrome、Firefox？Opera、Safari？使用另一张图片进行悬停操作？ - Kiquenet
3

检查你的html代码，应该像这样

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

以下是如何使用 .svg 图片作为可点击背景的另一个示例。请注意，链接上的文本由 CSS 隐藏，但可以在文本后同时显示可点击的 .svg 图片。如果您需要在文本之前显示图像，请在下面的代码段中将 ::after 伪元素更改为 ::before。

更新: 添加了材料设计的 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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接