我目前正在研究博客布局,但在尝试找出实现图像对齐的最佳方式时遇到了瓶颈。
每篇博文都有两张图片; “背景”图像设置为 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
关于如何做到这一点有什么想法吗?
最佳答案
好的,看这里:
.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
链接的宽度。
关于html - 动态布局中的图像对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44876578/