1

私はデザイナーではありませんが、今日は css の実験をしています

私の問題は、CSSのみを使用してWebページに画像を表示したいことです

http://gsg.com.au/solutions/six-drivers-of-sustainable-growth-healthy-brands

ここに私のサンプルコードがあります

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
            "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Pure CSS Popups 2</title>
<style type="text/css">
<!--
body {position: relative; background: black; margin: 0; padding: 0;}

div#links {position: absolute; top: 81px; left: 0; width: 166px; height: 700px; font: 16px Verdana, sans-serif; z-index: 100;}
div#links a {display: block; text-align: center; font: bold 1em sans-serif; 
   padding: 5px 10px; margin: 0 0 1px; border-width: 0; 
   text-decoration: none; color: #FFC; background:;
   border-right: 5px solid #505050;}
div#links #whl1 a:hover {color: #411; background: #AAA;
   border-right: 5px double white;}

div#links a img {height: 0; width: 0; border-width: 0;}
div#links a:hover img {position: absolute; top: 190px; left: 55px; height: 50px; width: 50px;}

div#content {position: absolute; top: 26px; left: 161px; right: 25px;
   color: #BAA; background: #22232F; 
   font: 13px Verdana, sans-serif; padding: 10px; 
   border: solid 5px #444;}
div#content p {margin: 0 1em 1em;}
div#content h3 {margin-bottom: 0.25em;}

h1 {margin: -9px -9px 0.5em; padding: 15px 0 5px; text-align: right;background: #00ff00 url('wheel01.png') no-repeat fixed center;
; color: #667; letter-spacing: 0.5em; text-transform: lowercase; font: bold 25px sans-serif; height: 28px; vertical-align: middle; white-space: nowrap;}
dt {font-weight: bold;}
dd {margin-bottom: 0.66em;}
div#content a:link {background: #00ff00 url('wheel01.png') no-repeat fixed center;}
div#content a:visited {background: #00ff00 url('wheel01.png') no-repeat fixed center;}
div#content a:link:hover {background: #00ff00 url('wheel01.png') no-repeat fixed center;}
div#content a:visited:hover {background: #00ff00 url('wheel01.png') no-repeat fixed center;}
code, pre {color: #EDC; font: 110% monospace;}
-->
</style>
</head>
<body>

<div id="links">
<a id ="whl1"><img src="wheel01.png" ></a>
<a id ="whl2"><img src="wheel02.png"></a>
<a id ="whl3"><img src="wheel03.png"></a>
<a id ="whl4" ><img src="wheel04.png"></a>
<a id ="whl5"><img src="wheel05.png"></a>
<a id ="whl6"><img src="wheel06.png"></a>
</div>

</div>


</body>
</html>

しかし、それは私にとってはうまくいきません

4

3 に答える 3

1

hover擬似クラスを使用します。

#foo {
  background-image: url('not-hovered.png');
}

#foo:hover {
  background-image: url('hovered.png');
}
于 2012-08-16T12:42:19.777 に答える
0 
<div id="links">
  <a id ="whl1"></a>
</div>

#links a{
  width:123px;
  height: 123px;
  background: url("your_normal_image.jpg") no-repeat; 
  display: block;}

#links wh11{
  width:123px;
  height: 123px;
  background: url("your_HOVER_image.jpg") no-repeat; }

<img>HTMLから削除する

BlasteralfredのansもR8ですが、この場合、画像を変更することはできません。現在の画像の不透明度を設定できます。

于 2012-08-16T12:49:31.373 に答える
0

どうぞ - 実際の例: http://jsfiddle.net/kKLKC/

HTML（一言で言えば）：

<p><a class="blue" href="http://www.icanhascheezburger.com"></a></p>​

が HTML マークアップから削除されていることに注意してください。

CSS:

a.blue { display:block ;
    width:151px ;
    height:180px ;
    background:url("http://www.digitaldemo.net/blue-bunny.png") no-repeat ;
}

a.blue:hover { background:url("http://www.digitaldemo.net/pink-bunny.png") no-repeat ;
}​

リンクごとに CSS セット (a.classname および a.classname:hover) を行う必要があります。

于 2012-08-16T12:53:26.197 に答える