html - 如何将一张图片放在另一张图片之上？

Question

我看过一些解释如何使用绝对位置的方法。我目前正在制作一个 Bootstrap 3 网站，所以我不能使用绝对属性。

下面是我正在谈论的内容的快速模型(请注意，播放按钮不会被嵌入到下面的图像中)

此外，如果您能解释一下如何制作类似的渐变，那就太好了。

我曾尝试使用 z-index 属性，但在使用它时我不知道如何相对于具有较低 z-index 的元素定位元素。

编辑:播放按钮(在图像顶部看到)将不是 jpg 图像 Assets 的一部分。相反，它将自己的 svg Assets 放在 jpg(缩略图)图像之上。我选择这种方式，以便我可以独立地为“播放按钮”设置动画。

渐变、标题、副标题或“文章标签”都不会成为缩略图 Assets 的一部分。

红色的“分隔符”也将是它自己的 svg 资源。

理想情况下，我希望能够放置 <img></img>对象在另一个之上<img></img>边界框并能够相对于边界框移动它。例如 x=50% y=50% 用于居中。该方法应该是可扩展的，以便我可以拥有两个以上的层以及在同一层上拥有多个对象。

注意:缩略图将以 1920x1080 的分辨率存储在网络服务器上。当尝试使用“分隔线”作为背景图像时，我遇到了裁剪问题:

它不会扩展其父级 <div> . (另外，有没有办法检测用户的屏幕尺寸并相应地(在服务器上)重新缩放图片以提高加载速度？比如 cookie 或其他东西？)

我很抱歉可能违反了网站上的大量规则，这是我的第一个问题。

Answer 1

关于渐变，一个简短的css写作将是:

background: -webkit-linear-gradient(135deg, #a11633 45%, #7D1229 48%, #7D1229 20%);

此外:我创建了一个 JSFiddle为你的布局:)

HTML:

<div class="relative-container">
  <div class="absolute-container">
    <div class="flex-1">
    Img 1
    </div>
    <div class="flex-1">
    Img 2
    </div>
    <div class="flex-1">
    Img 3
    </div>
  </div>
</div>

CSS:

.relative-container{
  width:300px;
  height:200px;
  background: -webkit-linear-gradient(135deg, #a11633 45%, #7D1229 48%, #7D1229 20%);
}

.absolute-container{
  width:300px;
  height:100px;
  display:flex;
  align-items: center;
  position:absolute;
  top:55px;
}

.flex-1{
  flex:1;
  border:1px dashed black;
  text-align:center;
}