0

次のようなイメージがあります。私のイメージ

この画像を (おそらく div 内で) 拡張して、次のようにすることは可能ですか? ここに画像の説明を入力

ありがとう！

4

5 に答える 5

1

CSSプロパティを使用して同じ色のdivを作成できますbackground-color（16進数は〜である必要があると思います#999）。次に、プロパティbackground-imageを使用して、画像をdiv内に配置しbackground-position: rightます。

HTML

<div class="arrow">Home</div>​

CSS

#arrow {
    background-color: #999;
    background-image: url('http://i.stack.imgur.com/QDCz4.png');
    background-position: right;
    background-repeat: no-repeat;

    /* sets div dimensions/text styles */
    height: 24px;
    color: white;
    text-align: center;
    line-height: 24px;
    float: left;

    padding-left: 20px;
    padding-right: 30px; /* slightly longer to account for background image /*
}

JSフィドル： http： //jsfiddle.net/fbBsz/14/

于 2012-07-18T16:48:36.370 に答える
1

width:1px の矢印の左上のグレー部分の垂直スライスを取得します。その 1 つの px スライス イメージを取得し、-x で繰り返します。

練習できるアイテムはこちら

画像にはグラデーションがないため、背景色を使用するだけで、必要な色に一致する可能性が高くなります。

于 2012-07-18T16:44:39.927 に答える
1

divの背景として設定できます

#elem {
display:block;
width:200px;
height:20x;
background: url(/filepath/to/image.gif) right top no-repeat #ccc;
}

背景色がgifの濃い灰色と同じであることを確認してください

于 2012-07-18T16:45:15.103 に答える
0

いいえ、これは CSS では不可能です。包含要素の幅を設定し、背景画像の URL を設定し、x 位置を右に設定し、繰り返しを繰り返しなしに設定する必要があります。次に、背景色をボタンの前景色と同じに設定します。ボタンの前景がパターンの場合、別の画像を背景として使用する必要があります。

于 2012-07-18T16:44:44.720 に答える
0

いいえ、少なくともその画像ではありません:-)

「スライドドア」テクニックを使用できるように見えます –それに関する良い記事についてはhttp://www.alistapart.com/articles/slidingdoors/を参照してください

于 2012-07-18T16:45:49.393 に答える