如何在背景圖像上放置圖像

Question

我想將圖像放置在背景圖像上。背景包含在放置在包含div底部的div內。我想在放置在底部中心的背景圖像頂部的右下角放置一個圖像。

我試圖使用兩個背景圖像，但無法將圖像放置在重複div上，而沒有在移動設備上放置的問題，因爲文本區域縮小並將圖像移動到容器下方。

我嘗試將圖像放在線上，但無法使其顯示在背景的頂部。

關於什麼是最好的方法會做什麼的任何想法？

.gradient-bg.slide { 
 
    background: url("http://www.clker.com/cliparts/f/d/b/5/1206555848388219874chlopaya_Bird.svg.med.png") no-repeat left top, linear-gradient(#ffcd74, #f8981d); 
 
    /*background: #ffcd74; 
 
    background: -moz-linear-gradient(top, #ffcd74 29%, #f8981d 78%); 
 
    background: -webkit-linear-gradient(top, #ffcd74 29%,#f8981d 78%); 
 
    background: linear-gradient(to bottom, #ffcd74 29%,#f8981d 78%);*/ 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffcd74', endColorstr='#f8981d', GradientType=0); 
 
} 
 

 
.slide_cloud { 
 
    background: url("https://preview.ibb.co/cyvOLv/harris_relativity_cloud_footer.png") no-repeat bottom center; 
 
    background-size: inherit; 
 
    padding: 20px; 
 
    height: 500px; 
 
    text-align: center; 
 
} 
 

 
.logo-image { 
 
    background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/WikiSpecies_notext.svg/300px-WikiSpecies_notext.svg.png") no-repeat bottom right; 
 
    padding-top: 100px; 
 
}

<div class="gradient-bg slide"> 
 
    <div class="slide slide_cloud"> 
 
    <h2>Generic Header</h2> 
 
    <div class="logo-image"> 
 
    </div> 
 
    <div class="slide-content"> 
 
     <div class="text">Generic text.</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

基於你解釋什麼，我假定這是你想要的佈局。

<div class="cloudbg"> 
<div class="bird"> 
<img src="http://www.clker.com/cliparts/f/d/b/5/1206555848388219874chlopaya_Bird.svg.med.png" height="75px" width="100px"> 
<h2>Generic Header</h2> 
<div class="content"> 
<br> Generic Text 
</div> 
</div> 
<div class="logo"> 
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/WikiSpecies_notext.svg/300px-WikiSpecies_notext.svg.png" height="50px"> 
</div> 

我在上面的代碼中使用了絕對定位來放置對象。要使標題出現在同一行中，請將其作爲內聯元素，如下所示。確保根據您的需要更改值。

.bird h2 { 
display: inline; 
vertical-align: top; 
} 

.cloudbg { 
background: 
url("https://preview.ibb.co/cyvOLv/harris_relativity_cloud_footer.png") no- 
repeat bottom; 
height: 350px; 
text-align: center; 
} 

.bird { 
display: inline; 
float: left; 
} 

.content { 
display: block; 
} 

.logo { 
display: block; 
position: absolute; 
bottom: 2px; 
right: 5px; 
} 

這裏是一個解決方案爲工作https://jsfiddle.net/jts9owh4/