0

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

目标是制作包含完整徽标的网站的第一页，黑色和白色。

我使用地图/区域，以便在鼠标输入事件时，我可以在徽标后面显示图像，在特定区域的徽标下创建某种阴影（我不能通过 css 进行，因为它具有特定的形状）。

我的四个图像如下：

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

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

我为所有图像尝试了以下 CSS（全部嵌入在单独的 div 中）

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

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

4

1 回答 1

0

没关系，我发现它并且实际上感觉很愚蠢：

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

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

希望它会帮助某人

于 2013-02-20T17:24:23.547 回答