Question

我尝试使用html和css在中心对齐的图像上显示一个简单的测试，但文本不会出现！这是项目链接：https://jsfiddle.net/enex/j1an8dh7/

HTML：

<div id="bg">
  <img src="http://oi62.tinypic.com/169nx8g.jpg" alt="">
   <p> display this text over the image </p>
</div>

CSS：

#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}
h2 { 
   position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
}

h2 span { 
   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);
   padding: 10px; 
}

Answer 1

您可以尝试将该图像作为div的背景，然后在正常的空白背景上像您一样编写。

<div id="bg" background="http://oi62.tinypic.com/169nx8g.jpg">
    <p> display this text over the image </p>
</div>

您还可以在应用的根目录中包含图片，为图片制作目录，并链接而不是http链接。（使其更容易理解）

例如，你创建一个文件夹图片，你在其中添加一张名为dog.jpg的狗的图片，图片的地址将是：“/ picture / dog.jpg”

Answer 2

https://jsfiddle.net/j1an8dh7/4/

我在您的HTML中将<p>更改为<h2> 我在你的CSS中调整了元素<h2>。

我希望这就是你想要的。干杯

PS：请不要羞于提供积分：）

Answer 3

这可行。

<html>
<style type="text/css">
    img {
        position: absolute;
    }

    .text {
        color: lightgreen;
        position: absolute;
    }
</style>
<div id="bg">
    <img src="http://oi62.tinypic.com/169nx8g.jpg" alt=""/>
    <div class="text">display this text over the image</div>
</div>
</html>

这也可以。

<html>
<style type="text/css">
    .text {
        width: 100%;
        height: 100%;

        background: url('http://oi62.tinypic.com/169nx8g.jpg');

        color: lightgreen;
    }
</style>
<div id="bg">
    <div class="text">display this text over the image</div>
</div>
</html>

这是您的选择，最简单的方法是设置背景图片：）

Answer 4

如果可以接受，同意背景是最佳选择。

https://jsfiddle.net/j1an8dh7/12/

#bg {
    background: url("http://oi62.tinypic.com/169nx8g.jpg") center center no-repeat;
    background-size: cover;
}

文字不会显示在图像上

4 个答案: