Question

我希望在我的页面对角线上有一个移动的背景图像，与下面的[网站] [1]和翻译元素如“网站开发者”，“SEO顾问”完全相同，请建议如何实现这种效果。

Answer 1

有很多选择。

<div></div>

div {
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Fonte_Gaia_-_she_wolf_detail.jpg/500px-Fonte_Gaia_-_she_wolf_detail.jpg");
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size:cover;
    background-position:center-top;
    background-position-x: 50%;
    background-position-y: 0%;
    -webkit-animation: zoomin 5s 1;
}

@-webkit-keyframes zoomin {
    0% {
        -webkit-transform: scale(1);
    }
    100% {
        -webkit-transform: scale(2);
    }

}

Answer 2

（这是为了解如何在循环中更改背景图像。要了解如何移动它，请参阅@ Pablo的答案）

见this fiddle
这是使用数组存储链接并使用以下javascript进行浏览：

function changeBGImage() {
  document.getElementById("main").style.backgroundImage = "url('" + images[next] + "')";
  next++;
  next %= 3;
}

P.S。使用3作为数组中图像的数量

在循环中移动背景图像

2 个答案: