html - 如何将图像放在背景图像之上

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/