Question

我正在尝试使用css将我网站上的文字链接更改为图片...需要一些帮助。下面你会看到我的CSS - 我想将我最喜欢的文字http://cl.ly/0S2j28082G2W423Y2T00更改为图像。

a.upb_add_bookmark {
    background: none repeat scroll 0 0 #E8BD61;
    border-color: #C79324;
    border-style: solid;
    border-width: 1px;
    color: black;
    padding: 2px 5px;
    text-decoration: none;
}

Answer 1

您的背景属性需要设置为包含图像。您还需要将<a>元素设置为inline-block，以便为其声明高度和宽度。

a.upb_add_bookmark {
 background: url('favorites-image.jpg') no-repeat;
 display: inline-block;
 height: 51px;
 width: 92px;
}

如何在不实际使用<img>标记的情况下显示图像;只不过是css。

Answer 2

<a href="http://www.site.com"><img src="image.png" alt="Favorite icon" /></a>

或

    a {
    background-image: url('image.png');
    background-repeat: no-repeat;
    display: inline-block;
    height: 50px;
    width: 150px;
    }
    <a href="http://www.site.com"></a>

我个人会使用第一个，因为图像是结构的一部分，而不是设计元素，CSS处理设计。

Answer 3

解决此问题的一种非常简单的方法

** 1.创建一个将封装此图像的div元素**

** 2.添加CSS以将此div的背景设置为图像。（见下面的代码）。在此示例中，div的类名称将被称为“button”

       .button
        {
            backgroundimage:url('http://cl.ly/0S2j28082G2W423Y2T00/Screen%20Shot%202012-02-09%20at%2012.02.45%20PM.png');
            height: 50px;
            width: 92px;
        }

        .button a
        {
            display: inline-block;
            height: 50px;
        }

修改Html *

将要显示的文字放入上述div中，并使用班级名称“按钮”

    <div class="button">

        <span>Favorite (1)</span>

    </div>

*这样您就可以在保留背景的同时选择实际文字*

以下是我的修改完整版本来源供您参考。

<!DOCTYPE html>
<html class="no-js" dir="ltr" lang="en">
  <head>

    <style>

        .button
        {
            background-image:url('http://cl.ly/0S2j28082G2W423Y2T00/Screen%20Shot%202012-02-09%20at%2012.02.45%20PM.png');
            height: 50px;
            width: 92px;
        }

        .button a
        {
            display: inline-block;
            height: 50px;
        }

    </style>

    <title>Screen Shot 2012-02-09 at 12.02.45 PM.png</title>

    <meta charset="utf-8">

    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width = device-width, initial-scale = 1.0, maximum-scale = 1.0, minimum-scale = 1.0, user-scalable = no" name="viewport">

    <meta content="CloudApp" name="author">

    <link href="http://assets.cld.me/1325250420/images/favicon.ico" rel="shortcut icon">

    <!--[if (!IE)|(gte IE 8)]><!-->
<link href="http://assets.cld.me/1325250420/assets/viso-datauri.css" media="screen" rel="stylesheet" type="text/css" />
<!--<![endif]-->
<!--[if lte IE 7]>
<link href="http://assets.cld.me/1325250420/assets/viso.css" media="screen" rel="stylesheet" type="text/css" />
<![endif]-->

    <script src="http://assets.cld.me/1325250420/assets/viso.js" type="text/javascript"></script>

    <!--[if lt IE 9]>
    <script src="http://assets.cld.me/1325250420/assets/ie.js" type="text/javascript"></script>
    <![endif]-->
  </head>

  <body id="image">
    <header id="header">

    <h1><a href="http://store.getcloudapp.com/">Simple sharing</a></h1>


  <h2>Screen Shot 2012-02-09 at 12.02.45 PM.png</h2>

  <a class="embed" href="http://cl.ly/0S2j28082G2W423Y2T00/Screen%20Shot%202012-02-09%20at%2012.02.45%20PM.png">Direct link</a>
</header>

<section id="content">

    <div class="button">

        <span>Favorite (1)</span>

    </div>

</section>


    <script type="text/javascript">
      var _gauges = _gauges || [];
      (function() {
        var t   = document.createElement('script');
        t.type  = 'text/javascript';
        t.async = true;
        t.id    = 'gauges-tracker';
        t.setAttribute('data-site-id', '4ea557ec613f5d39e7000002');
        t.src = '//secure.gaug.es/track.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(t, s);
      })();
    </script>
  </body>
</html>

Answer 4

a.upb_add_bookmark {
background: url('image.png') no-repeat;
border:none;
width: 92px;
height: 51px;
color: transparent;
padding: 2px 5px;
}

此代码适用于我

使用CSS将链接文本更改为图像

4 个答案: