代码之家 › 专栏 › 技术社区 › coreysimons

动态布局中的图像对齐

vertical-alignment image css html

0

coreysimons · 技术社区 · 9 年前

我目前正在做一个博客布局,我遇到了一个难题,试图找出实现图像对齐的最佳方法。

每个博客帖子有两个图像;“背景”图像的不透明度设置为0.5,第二个“顶部”图像的透明度设置为1。背景图像需要位于顶部图像下方。

到目前为止,我已经得到了这一点的布局 http://dev.thefold.com.au/sandbox/staggered/portfolio-2-col.html

我正在努力实现的形象就在这里 http://dev.thefold.com.au/sandbox/staggered/reworked.png

有什么办法吗?

1 回复 | 直到 9 年前

1

0

Chris Happy Roddy 9 年前

好的,看这里:

.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
制作一个 div bk-effect
第一个图像用作主图像
最后一幅图像将用作背景图像

目前,图像将偏移 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 链接