画像上にコンテンツが表示される

画像にコンテンツを追加しようとしていますが、コードを配置する場所がわかりません。私はそれをすべての上に置くと、それが優先され、私のコードは表示されません。しかし、私は体のCSSに画像を配置すると、それは表示されますが、私は次のコード行を画像の最後に配置しようとしましたが、私の最後のコード行の下の画像には配置しませんでした。。私はIMGコードを間違った場所に置いてしまったと確信しています。誰の助けにも感謝します。画像上にコンテンツが表示される

HTML：

<body> 
<div class="Image"> 
<img src="C:\Users\Gabriel\Downloads\Green-blur.jpg"/> 
<ul id="nav"> 
    <li id="brand"><a href="#">MINIMAL</a></li> 
    <li id="navm"><a href="#">Men</a></li> 
    <li id="navm"><a href="#">Women</a></li> 
    <li id="navm"><a href="#">Contact</a></li> 
</ul> 

<h1>Simplicity is Minimal</h1> 

<div id="home"> 
<a href="#" id="homeb">Shop Now</a> 
</div> 

</div> 

</body>

はCSS：

<!--Content from code shows--> 
body { 
background-image: url(); 
background-size: 100% 130%; 
background-repeat: no-repeat; 
font-family: "PT Sans", sans-serif; 

} 
<!--IMAGE TAKES PRIORITY--> 
img { 
height: 1000px; 
background-repeat: no-repeat; 
}

出典

2017-03-23 RogerFedFan

こんにちは、ガブリエル。ようこそ。あなたはjsFiddleか何かにそのコードを投げるべきです。だから、あなたの目標は画像の上にテキストとリンクを置くことです。 – sheriffderek

はい。私はそのイメージをバックグラウンドとして、HTMLコード内のコンテンツをそれにしたい。 – RogerFedFan

このような何か？

body { 
 
font-family: "PT Sans", sans-serif; 
 
} 
 

 
.image { 
 
    background: url("https://www.blogcdn.com/www.joystiq.com/media/2011/06/respawngameblurryimage530pxheaderimg.jpg"); 
 
    background-size: cover; 
 
} 
 

 
li { 
 
    display: inline-block; 
 
    padding-right: 10px; 
 
} 
 

 
li a{ 
 
    color: white; 
 
}

<div class="image"> 
 
<ul id="nav"> 
 
    <li id="brand"><a href="#">MINIMAL</a></li> 
 
    <li id="navm"><a href="#">Men</a></li> 
 
    <li id="navm"><a href="#">Women</a></li> 
 
    <li id="navm"><a href="#">Contact</a></li> 
 
</ul> 
 

 
<h1>Simplicity is Minimal</h1> 
 

 
<div id="home"> 
 
<a href="#" id="homeb">Shop Now</a> 
 
</div> 
 

 
</div>

注：HTMLで画像を削除して、あなたのCSSにこれを追加しました。

はそれが私はあなたの質問から理解することは、あなたが画像の上にコンテンツを配置することである

出典

2017-03-23 18:43:11

ありがとうございました！ – RogerFedFan

ようこそ。） –

を助け願っています。これは、以前のように背景イメージを使用することで実現できますが、背景イメージではイメージの正しいパスを指定する必要があります。

コード内 background-image：url（画像のパス）： background-size：contains;

イメージタグをhtmlから削除します。

出典

2017-03-23 18:45:28

その様子から、私はあなたがbodyの背景であることを、そのイメージを希望していると思うので、あなたはbodyにbackground-url()プロパティにあなたのimgのsrcを移動することができます。背景をブラウザウィンドウの高さ全体に広げたい場合はmin-height: 100vh;をbodyに追加します。

body { 
 
    background-image: url(http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg); /* put your "C:\Users\Gabriel\Downloads\Green-blur.jpg" image here */ 
 
    background-size: 100% 130%; 
 
    background-repeat: no-repeat; 
 
    font-family: "PT Sans", sans-serif; 
 
    min-height: 100vh; 
 
}

<body> 
 
    <ul id="nav"> 
 
    <li id="brand"><a href="#">MINIMAL</a></li> 
 
    <li id="navm"><a href="#">Men</a></li> 
 
    <li id="navm"><a href="#">Women</a></li> 
 
    <li id="navm"><a href="#">Contact</a></li> 
 
    </ul> 
 

 
    <h1>Simplicity is Minimal</h1> 
 

 
    <div id="home"> 
 
    <a href="#" id="homeb">Shop Now</a> 
 
    </div> 
 

 
</body>

出典

2017-03-23 18:46:26

それらの上に画像やコンテンツを考えるには二つの方法があります。 1つは、コンテンツが存在する要素に背景画像を追加することです。他の場合は、画像を使用して比率を維持し、絶対配置でコンテンツを「上に」配置したいと思うでしょう。

マークアップ

<header> 
    <div class="stuff">Stuff here... example with background image</div> 
</header> 

<!-- OR --> 

<div class="thing"> 
    <img src="https://placehold.it/1600x900" alt=""> 
    <div class="text"> 
    Stuff here... example with absolute and relative positioning 
    </div> 
</div>

スタイル

header { /* background image example */ 
    background-color: lightblue; 
    padding: 10px; 
    background-image: url(https://placehold.it/1600x900); 
} 

.thing img { 
    display: block; /* so the image responds to it's parent */ 
    width: 100%; /* */ 
    height: auto; /* */ 
} 

.thing { /* absolute position example */ 
    position: relative; /* so it is the new boundery for children that are absolute */ 
    max-width: 600px; 
} 

.thing .text { 
    position: absolute; /* this will take it out of the flow but let you position it based on parent */ 
    top: 0; 
    left: 0; 
    padding: 1rem; 
}

例：https://jsfiddle.net/sheriffderek/fvvq4cwq/

出典

2017-03-23 18:50:08 sheriffderek

画像上にコンテンツが表示される

答えて

関連する問題