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 만 빼고. 이미지가 구조의 일부가 아닌 디자인 요소와 디자인 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>
의 배경을 설정하기 위해이 이미지 **
** 2. 추가 CSS를 캡슐화하는 div 요소를 만들고이 문제
** 1. 문제를 해결하는 매우 간단한 방법 이 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
고마워,하지만 이것은 작동하지 않았다 ... 처음에는 작은 아이콘을 여러 번 반복했다 ... 나는 단지 하나만 필요로했다. 내 링크를 대체하지 않았다 ... 그것은 나의 링크 위에 올랐다 ... 이것은 사용 된 코드이다. 내 즐겨 찾기 링크를 생성하는 ... 이것은 내가 즐겨 찾기 게시물에 대한 플러그인이라고 말했듯이 ... $ bookmark = upb_bookmark_controls ($ add_text = '즐겨 찾기', $ delete_text = '즐겨 찾기 제거', $ wrapper = true); $ meta_output. = str_replace ('
다음은 현재 모습입니다 http://cl.ly/462U1H1q1S2E3Z3h1c0C – Eddie