Question

Link to image

我一直试图弄清楚这个网站是如何设置一个文本框放在图像的顶部。以下是该网站的链接：http://www.freedigitalphotos.net/images/Backgrounds_g162.html

他们是如何在这些图像上放置一盒文字的？

Answer 1

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

这里是demo and how-to

Answer 2

有两种方法可以做到：

在div上放置背景图像，然后添加包含文本的范围。
在div中放置图像和范围，但使用bottom: 0使范围位于绝对位置。

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

在一堆图像上放一盒文字

3 个答案: