0

同じ画像を同じページに何度も配置したいです。この画像の div を作成しましたが、毎回配置する最善の方法がわかりません。私は初心者で、これが比較的単純なものであることを願っています。これについてもっと良い方法はありますか？HTML部分にすべての「矢印」がありましたが、かなり不格好に見えました。助けてくれてありがとう!!! ちなみに、この例は 1 つのインスタンスを示しているだけです。

div.arrow  
{
width:17px; 
height:16px;
background-image: url("images/resumearrow");
}

<div class="arrow">
<img style= "position:absolute; top:13px; left:-19px; width:17px; height:16px;"></div>
4

5 に答える 5

0

私はあなたの質問を次のようにあなたの画像に矢印オーバーレイを付けたいと解釈します：

HTML：

<div id="thumbnail1" class="clickDiv">Thumbnail 1
    <div class="arrowOverlay" ></div>
    <img src="http://lorempixel.com/200/200/sports/1" class="thumb" />
</div>

CSS：

.clickDiv {
  position: relative;
  margin: 30px;
    /* The size of the DIV will be the thumnail image size plus borders on EACH side. */
  width: 204px;
  height: 204px;
  float: left;
}

.arrowOverlay {
  position:absolute;
  background:url("http://www.gravatar.com/avatar/106d65dcf622137346a5f164598985fa?s=64&d=identicon&r=PG") no-repeat center center;
  width: 100%;
  height: 100%;
  cursor: hand;
  cursor: pointer;
}

.thumb {
  width:  200px;
  height: 200px;
  /* Reminder: The border attribute as seen provides 2px per EACH side of the DIV. */
  border: 2px solid red;
}

デモ：

jsFiddleアローオーバーレイ

于 2012-12-23T03:34:31.090 に答える
0

「マークアップ」する方法について話しているだけの場合は、各画像（またはその周囲のdiv）にカスタムクラスを追加してから、外部スタイルシートにcssを追加できます。何かのようなもの：

<div class="arrow arrow1">

次に、以下を使用して選択します。

.arrow.arrow1 img{
     top:13px; 
     left:-19px; 
     width:17px; 
     height:16px;
}

目標は、絶対位置を使用する必要はなく、画像ごとに「カスタム」処理を行う必要がないことですが、必要な場合は、この方法を使用してスタイルをhtmlから除外できます。

于 2012-12-22T23:35:08.480 に答える
0

画像が埋め込まれたdivではなく、CSSプロパティbackground-image（および省略形）を使用することをお勧めします。background

簡単な例を次に示します。

HTML

<ul>
    <li>Apples</li>
    <li>Oranges</li>
    <li>Bananas</li>
</ul>

CSS 

li {
    height: 50px;
    padding-left: 60px;
    margin: 10px;
    background: url(http://placehold.it/50x50) no-repeat;       
}​

デモ

于 2012-12-22T23:15:38.200 に答える
0

何をしようとしているのかを正確に理解するのは難しいですが、[something div] の各インスタンスに矢印を付けようとしているようです。この矢印を適用する div のクラスに background-url を設定することを検討しましたか? それ以外の場合は、ページに背景を設定して、y 方向のみに繰り返すようにします。これにより、x ピクセルごとに矢印が繰り返されます。ここで、x は画像の高さです。

参照用にこれを参照してください: http://www.techforluddites.com/2010/02/thesis-replacing-list-bullets-with-images-using-css.html

于 2012-12-22T23:10:05.813 に答える
0

あなたは途中ですが、実際の例を示す例をここに作成しました: http://jsfiddle.net/u8Bww/2/

.arrow要素は に設定する必要がありますdisplay:block;。HTML内にテキストがあるので<div class="arrow">Text</div>、複数の手法を組み合わせて非表示にし、背景画像が透けて見えるようにしましたtext-indent: -1000px; color: transparent; font-size: 0px;。

.arrow画像を表示する必要がある場所ならどこでもクラスを 使用できるようになりました。

配置に関しては、これを行うインライン CSS の例をいくつか含めましたが、実際の使用方法はさまざまです。

于 2012-12-22T23:25:05.233 に答える