內容上的圖像顯示

我試圖在圖像上添加內容，但我不確定在哪裏放置代碼。當我把它放在一切之上時，它優先，我的代碼沒有顯示。但是，當我將圖像放置在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的背景，讓您可以在img的src移動到background-url()財產上body。如果您希望背景跨越瀏覽器窗口的整個高度，請將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

有考慮在它們上面的圖像和內容兩個方面。一種方法是向內容所在的元素添加背景圖像。在其他情況下，您需要使用圖像來保持比例，然後使用絕對定位將內容放在最上方。

標記

<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

內容上的圖像顯示

回答

相關問題