图像上的 css 文本答案

【问题标题】：css text on the image图像上的 css 文本
【发布时间】：2014-10-02 21:19:09
【问题描述】：

我有一张必须全宽的图片。我需要在它上面的特定位置放置一个文本和一个按钮。我查看了许多主题，但无法弄清楚如何使其完全响应。

<div class"wrapper">
    <div class="image-box">
        <img src="x">
    </div>
    <div class="content-box">
        <h1>text goes there</h1>
        <a>anchor tag goes there</a>
    </div>
</div>

所以这是布局，但如果它能让我达到我需要的程度，它可以更改。

如果我理解正确，应该将名为 wrapper 的父 div 设置为 position：relative 并将所有子 div 设置为 position：absolute，然后您只需将所有这些子元素定位为顶部、左侧、右侧、底部。因此，经过测试，这就是我得到的。由于图像始终是视口的 100%，由于其纵横比，它的高度和宽度变得越来越小。图像上的文本和按钮只是停留在一个固定的位置，过了一段时间它就消失了。

我的错误是什么？

P.S 找到了很多主题，但我还是把事情搞砸了。感谢您的见解和帮助。

【问题讨论】：

标签： css image text

【解决方案1】：

图像标签用于在页面上创建一个单独的元素。这不是真的你想要的......你希望内容框有背景，对吗？不要使用图片标签，而是使用 CSS 来应用背景图片。

here is a jsfiddle

.content-box {
    /* set width and height to match your image */
    /* if these are omitted, it will only be as big as your content, */
    /* and only show that much of your image */
    width: 200px;
    height: 300px;
    /* obviously, replace this with your image */
    background:url('http://placecage.com/200/300');
}

<div class"wrapper">
    <div class="content-box">
        <h1>text goes there</h1>
        <a>anchor tag goes there</a>
    </div>
</div>

【讨论】：

【解决方案2】：

我想这就是你想要的。此外，这是使用那些 HTML5 标签figure 的好时机和figcaption，但基本上你只需要这种结构：

<div class="wrapper">
    <img />
    <div class="content-box">
        <!-- Your content here -->
    </div>
</div>

所以这里发生的事情是您的wrapper 的尺寸由图像固定，然后您绝对定位您的content-box 或其中的元素。如果您不想将它们定位在图像的最顶部或底部，只需在定位时使用百分比值：

top: 10%;

figure {
  position: relative;
}

figure img {
  width: 100%;
  height: auto;
}

figure figcaption {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  background: rgba(255,255,255,.7);
  padding: 10px;
}

<figure>
  <img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" />
  <figcaption>
    <h1>The image title</h1>
    <p>This is the image caption</p>
  </figcaption>
</figure>

【讨论】：