Question

我目前正在使用bootstrap并拥有3x3网格图像。它们是200x200的图像，我已经无处可寻，试图找到一种方法来获得叠加效果。我最近才开始编写代码。

Serenbe.com在页面的中间位置（也是3x3网格）正是我想要的。照片变亮，当光标在其上方时，会在其上方显示徽标。但是，如果照片不可能或太复杂，我会满足于文字/链接。现在绝对没有任何工作。

我的图像被安排在容器内的div中。 div占用了6列。我应用的唯一样式是删除填充，以便它接触页面的边缘。

有什么建议吗？我100％迷失在这里，任何有用的东西。

谢谢！

Answer 1

你听说过用你的css悬停吗？ :)它非常酷，我认为这是该网站用于其图像的内容。

一个简单的方法来为初学者做你想要的是我会有两张照片。一个是原始的，第二个是你想要的效果。对于serenbe来说，似乎他们只是使用photoshop将徽标添加到顶部，然后更改了照片的不透明度。

然后我会将你的img包装在div中，然后在你的css中执行类似的操作：

.customdiv{
  height:200px;
  width:200px;
  background-image:url("imagelinkhere");
}

.customdiv:hover{
  background-image:url("newimagehere");
  opacity:.5;
}

这样做是将鼠标悬停在div上时将div中的内容更改为新图片，然后在图像上应用不透明度。

这些只是帮助您入门的一些提示！祝你好运

图像叠加使用Bootstrap？

1 个答案: