Question

我见过一些解释如何用绝对位置做到这一点。我目前正在制作一个Bootstrap 3站点，所以我不能使用绝对属性。

下面是我正在谈论的内容的快速模型（请注意，播放按钮不会被刻录到下面的图像中）

Mockup

另外，如果你能解释如何制作类似的渐变，那就太好了。

我曾尝试使用z-index属性，但在使用它时，我无法弄清楚如何相对于具有较低z索引的元素定位元素。

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

渐变，标题，副标题或“文章标签”都不是缩略图资源的一部分。

红色的“分频器”也将是它自己的svg资产。

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

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

enter image description here

它不会扩展其父<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;
}

如何将图像放在另一张图像上？

1 个答案: