文本不顯示在圖像

我想顯示一個簡單的測試在與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

文本不顯示在圖像

回答

相關問題