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

、#headline1で財産z-index: 9999;を追加し、それが何z-indexpositionabsoluteへ

だ変更はdiv要素をプッシュすることですもう一方の上下にある。だから、z-index: 1持つdiv要素がz-index: 10

出典

2017-08-18 17:26:26

持つdiv要素は、私は画像の上に横たわるとH1は将来的にあなたにトラブルを取得することを考えることに低くなって、私は（またはあなたのbodyの#headline1の背景として画像を使用することをお勧めそれがあなたが必要とするものならば）。

あなたは、CSSを使用することによって、これを達成することができます

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

これは結果（コードスニペットを実行する）である：あなたのH1にZインデックスを付け

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

; 例えば：

h1 { 
    z-index: 1040; 
}

あなたはここで見ることができます： JS-FIDDLEを：https://jsfiddle.net/60c5napb/

出典

2017-08-18 17:39:16 user8455694

CSS/HTMLは画像にテキストを重ねて表示しますか？

答えて

関連する問題