在一堆图像上放置一个文本框

Question

Link to image

我一直在想弄清楚这个网站是如何设法在图片上放置一个带有文本的框的。这是网站的 link：http://www.freedigitalphotos.net/images/Backgrounds_g162.html

他们是如何设法在这些图片上放一个文本框的？

Answer 1

div.box-text 在包含图像的同一容器内具有绝对定位，并被 bottom: 0 下拉。

这是一个demo and how-to

Answer 2

有两种方法可以做到这一点：

在 div 上放置背景图片，然后添加包含文本的 span。
在 div 中放置一个图像和一个 span，但使用 bottom: 0 使 span 的位置成为绝对位置。

Answer 3

<!DOCTYPE html>
    <html>
        <head>
            <link rel="stylesheet" type="text/css" href="css/style.css"></link>
        </head>

        <body>
            <div id="container">
                <img src="image/image.jpg" />
                <div id="text">
                    <p>Test of Text</p>
                </div>
            </div>
        </body>
    </html>


#html, body{
    width: 100%;
    height: 100%;
}

#container{
    width: 500px;
    height: 300px;
}

#container img{
    height: 100%;
    width: 100%;
    position:relative;
}

#text{
    width:100%;
    height: 30%;
    position:relative;
    z-index: 1;
    top:-41%;
    background: black;
    opacity: 0.8;
    color: white;
    font-family: Arial;
    text-align:center;
    font-size: 30px;
}

PATH-
  css
    style.css
  image
    image.jpg
  index.html

在一堆图像上放置一个文本框

Putting a box of text over a bunch of images

html

image

text

box