0

我想用 HTML5/CSS3 制作一个与设备无关的动画。这意味着我有一个背景图像，专门绘制以便它的边缘可以被切断，并且我在带有 的div元素中使用它background-size: cover，如下所示：

#main-image {
  background: url(intro1-1.jpg) no-repeat center center fixed;
  background-size: cover;
  height: 100%;
  width: 100%;
  overflow: hidden;
  z-index: 0;
}

#propeller {
  background: url(propeller2.png) no-repeat;
  position: relative;
  top: 265px;
  left: 1080px;
  z-index: 10;
  background-size: 100% 100%;
  width: 18%;
  height: 12%;
}

<div id="main-image"><div id="propeller"></div></div>

在背景层之上，我想绘制动画层。麻烦来了：如何将透明动画部分定位到完整（非缩放）背景图像中的特定位置？

我还需要使用与缩放背景相同的比例来缩放动画层。但是我该怎么做呢？

所以实际上，我正在寻找一种方法来加载高清背景图像，在其顶部定义高清动画层，然后应用cover填充整个浏览器屏幕。

最简单的方法是什么？

4

1 回答 1

1

以我的经验，这在纯 CSS 中很难做到。我做了类似于你在这里问的东西：http: //jsfiddle.net/ahhcE/

这是螺旋桨特定的代码：

#propeller {
  background: url(propeller2.png) no-repeat;
  background-color: blue;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -9%;
  margin-top: -6%;
  z-index: 10;
  background-size: 100% 100%;
  width: 18%;
  height: 12%;
}

我将它定位为绝对只是为了方便，但如果它相对于父 div 定位，您可能会希望它是相对的。

（对不起颜色，我代替你的图片）

问题是在上边距和高度百分比上，浏览器从窗口的宽度继承了这些值。因此，您会注意到，如果您调整视图窗口的大小，该框不会完全居中。我过去通常使用 javascript 解决这个问题。像这样的东西：

function heightAdjust() {
  var windowHeight = $(window).height();
  totalMenuHeight = $("#menu").height();
  document.getElementById('menu').style.marginTop = windowHeight / 2 - totalMenuHeight / 2 + 'px';
  $('.thing').css("height", windowHeight+'px');
}

希望这会有所帮助。垂直居中确实是您唯一的问题，您也可以使用表格样式成功破解这个问题，这是一些网站用于垂直定位的方法。更多关于这一点，以及其他解决方案：http: //coding.smashingmagazine.com/2013/08/09/absolute-horizo​​ntal-vertical-centering-css/

于 2013-10-09T23:10:41.527 回答