CSS/HTML與文本疊加圖像？

-1

我已經在html和css中編寫了一些帶有文本和圖片的網站，但是我不知道如何用它覆蓋圖片（如何用圖片疊加圖片）。CSS/HTML與文本疊加圖像？

HTML：

<!DOCTYPE html> 
<html lang ="de"> 
<head> 
    <title>SirMarkypus | Homepage</title> 
    <link href="homepage.css" rel="stylesheet" type="text/css"> 
    <meta charset="utf-8"> 
</head> 
<body> 
    <h1 id="headline1">Willkommen auf dem SirMarkypus-Server!</h1> 
    <img id="backgrounder1" src="img/backgrounder.png" alt="SirMarkypus- 
Backgrounder"> 
</body> 
</html>

CSS：

body { 
background: gray; 
} 
#backgrounder1 { 
position: absolute; 
top: -60px; 
width: 1910px; 
height: 720px; 
} 

#headline1 { 
position: relative; 
margin: 0px; 
padding: 10px; 
text-align: center; 
font-family: "Verdana"; 
font-size: 48px; 

color: #FFF; 
}

來源

2017-08-18 SirMarkypus

爲什麼不H1本身使用的背景圖片？ –

@Nawed Khan我該怎麼做？ – SirMarkypus

在CSS中，#headline1添加屬性z-index: 9999;，並改變它的position到absolute

做什麼z-index是推動一個div在另一個之上/之下。因此，與z-index: 1股利較低，與z-index: 10

來源

2017-08-18 17:26:26

一個div我認爲，上覆圖像和H1將讓你煩惱的未來，我建議使用的圖像作爲#headline1的背景（或你的body的如果那是你需要的）。

您可以通過使用CSS實現這一點：

background-image: url(http://2.bp.blogspot.com/-UbfRzKJqnyk/UJyT60Mm7eI/AAAAAAAADFs/bLcANzIsYfs/s1600/pattern_of_holes-dark_background_pattern.jpg);

這是結果（運行的代碼片段）：

body { 
 
    background: gray; 
 
} 
 
#backgrounder1 { 
 
    position: absolute; 
 
    top: -60px; 
 
    width: 1910px; 
 
    height: 720px; 
 
} 
 

 
#headline1 { 
 
    position: relative; 
 
    margin: 0px; 
 
    padding: 10px; 
 
    text-align: center; 
 
    font-family: "Verdana"; 
 
    font-size: 48px; 
 
    color: #000; 
 
    background-image: url('http://freedesignfile.com/upload/2013/09/Metal-background-5.jpg'); 
 
}

<!DOCTYPE html> 
 
<html lang ="de"> 
 
<head> 
 
</head> 
 
<body> 
 
    <h1 id="headline1">Willkommen auf dem SirMarkypus-Server!</h1> 
 
</body> 
 
</html>

來源

2017-08-18 17:35:33 Nazkter

提供的z-index到您的H1 ; 例如：

h1 { 
    z-index: 1040; 
}

你可以看到在這裏： JS-FIDDLE：https://jsfiddle.net/60c5napb/

來源

2017-08-18 17:39:16 user8455694

CSS/HTML與文本疊加圖像？

回答

相關問題