html - 背景画像の境界線

Question

背景画像の周りに境界線を設定する css プロパティはありますか? 私はそれを探していましたが、見つかりませんでした。それは存在しますか、それとも背景画像の周りに手動で線を引く必要がありますか?

Answer 1

これは、div に画像を追加し、div の境界線を設定することで実行できます。

<div style="border:1px solid red;float:left;">
   <div style="background:url("...");float:left;"></div>
<div>

Answer 2

特定の実装の詳細がなければ、すべての場合に機能するソリューションを提供することは（不可能ではないにしても）非常に困難です。提供された制約を使用したいくつかのソリューションを次に示します。

例1-固定サイズ

背景画像の高さと幅がわかっている場合は、次のようにすることができます。

HTML

<div class="bg"> </div>

CSS

div.bg {
  background-image: url('http://www.google.com/images/logo_sm.gif');
  border: 5px solid #000;
  width: 50px;
  height: 50px;
}

実例： http： //jsfiddle.net/WUHmw/

例2-背景画像の繰り返し

背景画像が繰り返される場合は、次のようにすることができます。

HTML

<div class="bg">
   <p>Here is some text to on top of the background image.</p>
</div>

CSS

div.bg {
  background: url('http://i.imgur.com/ikxbnvc.png') repeat;
  border: 5px solid #000;
  box-sizing: border-box;
  width: 100%;
  height: 200px;
}

実例： http： //jsfiddle.net/pLz52/