1

我有 4 张手机图像并排在一起，带有透明屏幕。当浏览器的屏幕尺寸发生变化时，手机会彼此靠近。

应该有一个通过手机屏幕可见的背景图像，但我不能为容器使用背景图像，然后让每个手机屏幕透明，因为这样一部手机将在其下方显示另一部手机，如下所示：

http://jsbin.com/ozoyoc/1/

我还尝试了什么：

  1. 将容器 background-image 放在每个phone-div中，不起作用，似乎在调整浏览器窗口大小时，与background-position的百分比对齐不会剪切图像的正确部分（*）
  2. 在每个 phone- li中放置一个div，代表屏幕。无法将图像偏移到每个电话的正确位置，因为 % 将相对于父元素大小，即li而不是容器

这可以在 CSS 中实现还是我必须查看 Javascript 来设置正确的图像偏移？

编辑：
*（1）为了澄清，在这个小提琴中，窗口移动的位置-div 确实根据其位置显示了图像的正确部分。也许这是因为它是用绝对像素而不是百分比指定的？http://jsfiddle.net/XjCCK/39/

.moving {
 left: left,
 top: top,
 backgroundPositionX: -left,
 backgroundPositionY: -top
}
4

1 回答 1

0

您可以使用background-attachment: fixed;正确定位内部背景（在您的情况下为水滴），然后使用顶部/左侧/右侧/底部进行剪辑。

.iphone {
  /* needs to have a position value other than 'static' for clipping below */
  position: absolute;

  /* untouched rules */
  width: 177.6px;
  height: 411px;
  top: 15.2%;
  left: 18.488%;
  z-index: 2;

  /* moved your iphone image to the outer container */
  background-image: url(http://s18.postimg.org/fzjmm7kih/iphone5.png);
  background-size: 100%;
}

.iphone > div {
  position: absolute;

  /* clip */
  top: 13%;
  right: 10%;
  bottom: 26%;
  left: 10%;

  /* i put your droplet image on the inner div */
  background-image: url(http://s16.postimg.org/vqs385e6t/background_leaf.jpg);

  /* positioning magic */
  background-attachment: fixed;
}

请参阅http://jsbin.com/ozoyoc/2/上的演示

来源： http: //meyerweb.com/eric/css/edge/complexspiral/demo.html（在 alpha 透明颜色或 png 支持之前创建）

于 2013-04-29T13:30:43.110 回答