Question

我正在尝试解决以下问题：在房屋蓝图的图像上，我需要放置“标签”。所以，在厨房里，必须有一个标签“KITCHEN”;在浴室，“浴室”等。即使调整浏览器窗口大小，标签也必须保留在相应的房间上。我怎样才能保证只使用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);
}

这种方法很有效，但是调整窗口大小会使一切都不合适而且不成比例。

Answer 1

我想HTML5元素会给figure＆amp; figcaption一枪。他们有很好的嵌套和谐。

来自W3C：

数字元素表示内容单位，可选地带有标题，即自包含的，通常被称为a 来自文档主流的单个单元，可以移动远离文件的主流而不影响文件的含义。

可以在The figure & figcaption elements找到精彩的博文。

让你的图像大小决定区域，不要像使用img { max-width:100%; max-height:100%; }一样强制使用CSS。

你的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>

调整窗口大小时，如何在HTML中保持图像和文本对齐？

1 个答案: