2

次の問題を解決しようとしています。家の設計図の画像の上に、「ラベル」を付ける必要があります。したがって、キッチンの上には「KITCHEN」というラベルが必要です。バスルーム、「BATHROOM」など。また、ブラウザー ウィンドウのサイズが変更された場合でも、ラベルは対応する部屋の上に残る必要があります。HTML/CSS/JS のみを使用することを保証するにはどうすればよいですか?

ここに私のHTMLがあります：

<html>
<head>
    <link href="overlay.css" rel="stylesheet" type="text/css" />
</head>
<div class="image">
      <img src="blueprint.png" alt="" />
      <span>LABEL</span>
</div>
</html>

キッチンの位置が上 10%、左 40% であると仮定すると、次のoverlay.cssようになります。

img {
   max-width:100%; 
   max-height:100%;
}
.image { 
   position: relative;
   width: 100%; /* for IE 6 */
  overflow: hidden;
}  
span { 
   position: absolute; 
   top: 10%; 
   left: 40%; 
   color: white; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
}

それはある程度機能しますが、ウィンドウのサイズを変更すると、すべてが適切に配置されず、バランスが崩れます。

4

1 に答える 1

1

私はHTML5要素が与えてくれると思いfigureますfigcaption。彼らは素晴らしい入れ子の調和を持っています。

W3C から:

figure 要素は、必要に応じてキャプションを付けて、自己完結型のコンテンツの単位を表し、通常はドキュメントのメイン フローから単一のユニットとして参照され、ドキュメントのメイン フローから移動することなく移動できます。ドキュメントの意味に影響を与えます。

The figure & figcaption elementsに素晴らしいブログ記事があります。

画像のサイズによって領域が決まるようにします。CSS で強制しないでくださいimg { max-width:100%; max-height:100%; }。

CSS もクリーンアップを使用できます。

これがあなたのコードを転用したものです。コピーして貼り付けて、試してみてください。

<style type="text/css">
figure {
    margin: 0;
}
img {
    position: absolute;
}
figcaption {
    background: black;
    color: white;
    display: inline-block;
    font: bold 24px/45px Helvetica, Sans-Serif; 
    left: 10px;
    padding: 10px;
    position: relative;
    top: 10px;
}
</style>
<figure>
    <img src="bathroom.jpg" alt="Bathroom" />
    <figcaption>Bathroom</figcaption>
</figure>
于 2012-07-10T18:06:37.103 に答える