我正在嘗試將我網站上的文本鏈接更改爲使用CSS的圖像...需要一些幫助。下面你會看到我的CSS - 我想將我最喜歡的文字http://cl.ly/0S2j28082G2W423Y2T00更改爲圖像。使用CSS將鏈接文本更改爲圖像
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;
}
您的背景屬性將需要設置爲包含圖像。您還需要將<a>元素設置爲inline-block，以便您可以爲其聲明高度和寬度。
a.upb_add_bookmark {
background: url('favorites-image.jpg') no-repeat;
display: inline-block;
height: 51px;
width: 92px;
}
那你怎麼能不實際使用<img>標籤顯示圖像;沒有什麼，但CSS。
<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優惠我想使用的第一個。
一個非常簡單的方法來解決這個問題
** 1.創建一個將封裝這一形象**
** 2.添加CSS以設定的這一背景div元素這個div是圖像。 （請參閱下面的代碼）。在這個例子中你div的類名稱將被稱爲「按鈕」
.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;
}
將要顯示與類名前述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>
a.upb_add_bookmark {
background: url('image.png') no-repeat;
border:none;
width: 92px;
height: 51px;
color: transparent;
padding: 2px 5px;
}
此代碼對我的作品
+1這個原本否決，但似乎像精確解你能看到在這種情況下。我們是否誤解了你的問題？ – pat8719 2012-02-09 17:12:18
謝謝，但這並沒有工作...首先它重複了我的小圖標多次...我只需要一個，它並沒有取代我的鏈接...它在我的鏈接上...這是使用的代碼以生成我的收藏夾鏈接...就像我說這是一個插件，用於書籤帖子... $ bookmark = upb_bookmark_controls（$ add_text ='Favorites'，$ delete_text ='Remove Favorite'，$ wrapper = true）; $ meta_output。= str_replace（'
下面是它現在的樣子http://cl.ly/462U1H1q1S2E3Z3h1c0C – Eddie 2012-02-09 17:35:57