html - 动态布局中的图像对齐

Question

我目前正在研究博客布局，但在尝试找出实现图像对齐的最佳方式时遇到了瓶颈。

每篇博文都有两张图片； “背景”图像设置为 0.5 不透明度，第二个“顶部”图像设置为 1 不透明度。背景图像需要位于顶部图像下方。

到目前为止，我在这里得到了布局 http://dev.thefold.com.au/sandbox/staggered/portfolio-2-col.html但无法弄清楚如何在顶部图像下方获取背景图像，在顶部图像和背景图像之间留出 160px 的距离 - 以一种可以适应未确定的图像高度的方式。此 html/css 最终将用于 Wordpress 主题，因此该解决方案需要适应用户添加的具有不同高度的图像。

这里是我想要实现的目标的图像 http://dev.thefold.com.au/sandbox/staggered/reworked.png

关于如何做到这一点有什么想法吗？

Answer 1

好的，看这里:

.bk-effect {
  position: relative;
  display: inline-block;
  font-size: 0;
  line-height: 0;
}

.bk-effect img:first-child {
  position: relative;
  z-index: 10;
}

.bk-effect img:last-child {
  opacity: 0.5;
  position: absolute;
  z-index: 5;
  bottom: -160px; /* How much down of the original image */
  right: -150px;  /* How much right of the original image */
}

<div class="bk-effect">
  <img src="https://placehold.it/400x300/000">
  <img src="https://placehold.it/400x300/000">
</div>

重用它:

• 复制CSS
• 用bk-effect类制作一个div
• 第一张图片用作主图
• 最后一张图片将用作背景图片

目前，图像将向下偏移 160px 并向右偏移 150px。您可以通过更改下面的相关行来更改这些值。

注意:我添加了font-size: 0; line-height: 0; 删除图像下方的任何空间。这允许精确偏移，但这也意味着 .bk-effect 元素内不会显示任何文本。

对于提供的链接，将代码更改为:

.img-portfolio > a {
  position: relative;
  display: inline-block;
  font-size: 0;
  line-height: 0;
  padding-right: 50px;   /* How much right of the original image */
  padding-bottom:160px; /* How much down of the original image */
  width: 85%; /* Move the 85% to here */
}

.img-portfolio > a img:first-child {
  position: relative;
  z-index: 10;
  box-sizing: content-box;
  width: 100%; /* Remove the 85% here and move it up */
}

.img-portfolio > a img:last-child {
  opacity: 0.5;
  position: absolute;
  z-index: 5;
  bottom: 0;
  right: 0;
  box-sizing: content-box;
}

注意:您不能更改主图像的宽度，右侧的偏移将被关闭。相反，更改 a 链接的宽度。