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

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/