css - 在 bootstrap .container 中将四个图像定位在同一个位置，以屏幕为中心

Question

我想在屏幕上的完全相同位置放置四个图像，居中，并在 Bootstrap .container 中，这样如果图像太大，它们会被调整大小。

目标是制作包含完整 Logo 的网站首页，黑白两色。

我使用 map /区域，以便在鼠标输入事件中我可以在 Logo 后面显示图像，在特定的 Logo 下方创建某种阴影(我无法通过 css 实现，因为它具有特定的形状)地区。

我的四张图片如下:

• 完整标志
• 左上角的阴影
• 右上角的阴影
• 底部阴影

它们都具有完全相同的尺寸。我认为仅对所有这些组合使用 .pagination-centered 就足够了，但它不起作用。

我为所有图像尝试了以下 CSS(全部嵌入到单独的 div 中)

position:absolute;
left:50%;
top:50%;
margin-left:-157px;
margin-right:-157px;
/* half of img real size */

它运行良好，但在移动设备上效果不佳，因为移动设备上的图像未正确调整大小并且底栏出现在屏幕中间，因为我猜定位时未考虑图像高度。

Answer 1

没关系，我发现了它，实际上感觉很愚蠢:

我只是使用多个 css 类，并将背景应用到图像本身。

在响应式设计中，它不能很好地工作，因为背景没有调整大小，但我很确定我可以找到解决方法。如果没有，我将使用两组图像。由于回调发生在 mouseenter 事件上，所以它在移动设备上并不重要!

希望对大家有帮助