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找到一篇精彩的博客文章。

让您的图像大小决定区域，不要像使用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 回答