0

希望有人能告诉我这是否可能

我在 opencart 中有一个网站，背景是“地球”图片，我想通过让它在 z 轴上旋转使其顺时针旋转来为其设置动画。

body {
 background:url('../image/bg.jpg') repeat;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
}

这是css设置背景，我找到了这块，但我看到我不能引用背景属性？不确定，但这就是我基本上想要body的背景属性做的事情。

.image {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 120px;
   height: 120px;
   margin:-60px 0 0 -60px;
   -webkit-animation:spin 8s linear infinite;
   -moz-animation:spin 8s linear infinite;
   animation:spin 8s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }

@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }

@keyframes spin { 100% { -webkit-transform: rotate(360deg); 
ransform:rotate(360deg);    }     }

这无论如何都可以旋转html页面的背景图像吗？

4

2 回答 2

1

您将无法应用您transform来旋转背景图像：它只能应用于整个 DOM 元素。您最好的选择是 - 而不是将背景应用于body标签 - 将图像本身包含在您的标记中。

然后，您将申请使用定位和 z-index 在正确的位置直观地获取图像，并且由于它在标记中，您可以transform在该元素上应用。

我上面描述的正是您的示例代码所实现的（我没有触及那个小提琴中的 CSS），所以我对您的问题有点困惑。

于 2013-10-30T10:52:54.650 回答
0

正如我们所说，您不能旋转背景图像。您可以做的是将图像添加到 HTML 中，绝对定位，然后旋转

用于内联图像的 JSFiddle

作为替代方案，您可以使用伪元素将图像从 HTML 中完全删除并将其放回它所属的 CSS 中

用于伪元素的 JSFiddle

body {
    position:relative;
}

body:before {
    content:"";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    background-image:url(http://placekitten.com/300/300);
    -webkit-animation:spin 8s linear infinite;
    -moz-animation:spin 8s linear infinite;
    animation:spin 8s linear infinite;
    opacity:0.5;
    border-radius:50%;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { transform:rotate(360deg);    }
于 2013-10-30T11:23:41.450 回答