文本不显示在图像

我想显示一个简单的测试在与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; 
}

来源

2015-02-23 Giulio Cantadori

考虑使用'背景image' CSS属性，而不是一个''标签 – ByteHamster 2015-02-23 21:03:21

半的你的CSS规则，甚至不适用于此。 – j08691 2015-02-23 21:03:39

您的'＃bg'有顶部和左侧'-50％' – Huangism 2015-02-23 21:06:08

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

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

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

来源

2015-02-23 21:12:34 Stickers

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

我改变了<p>为<h2>在HTML
我扭捏你的元素<h2> CSS。

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

PS：请不要害羞提供点:)

来源

2015-02-23 21:08:41 Brain

你可以尝试让该图像的div的背景和简单的写像你的世界在一个普通的空白背景。

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

你也可以包括让图片和链接，而不是一个HTTP链接。（更容易理解）

例如目录的应用程序的根目录里面的图片，创建文件夹中的图片，你添加一个狗，你的名字dog.jpg，图片的地址将是：“/pictures/dog.jpg”

来源

2015-02-23 21:09:11 Adimax

这可以工作。

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

这是你的选择，最简单的方法是设置一个背景图像:)

来源

2015-02-23 21:10:25 Djip

文本不显示在图像

回答

相关问题