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/

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

1 个答案: