加载时背景淡入

Question

我正在尝试让我的背景在进入网站时淡入。我尝试了几种有效的方法。但是，我只是无法将背景集中在不同的分辨率上。正如您目前在进入我的网站时看到的那样，无论何时调整浏览器大小时，背景都会始终位于中间。网站：http://studi0.ml/ 这正是我想要实现的目标，但仍然让地球始终处于中间位置。而我的背景是纯粹的CSS。请记住，我刚刚开始网站设计。我已经尝试编码 2-3 周了。

html,
body {
  background: url(http://studi0.ml/EzJsucI.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-transition: background 0.0s linear;
  -moz-transition: background 0.75s 0.0s linear;
  -o-transition: background 0.75s 0.0s linear;
  transition: background 0.75s 0.0s linear;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}

Answer 1

如果您希望背景图片在页面加载时淡入，我会推荐不同的设置。您可以在与页面其余部分不同的流程中有一个单独的 div，并在页面加载时将其设置为不透明度为 1 的动画。

HTML

<html>
<head> ... </head>
<body>
    <div class="page-bg"></div>
</body>
</html>

CSS

html, body {
    height: 100%;
    width: 100%;
}

body {
    position: relative;
}

.page-bg {
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: url(http://studi0.ml/EzJsucI.jpg) no-repeat center center fixed;
    background-size: cover;

    animation-name: fadeIn;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-duration: 1s;
    animation-fill-mode:forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

当然，您可能需要为 animation 和 keyframes 声明添加 polyfill。 （即 -moz-animation-name、-webkit-animation-name 等。）

这是 Plunkr 上的一个工作示例。我不得不将您使用的图像与带有 https link 的图像交换，这样加载它就不会有问题。

Answer 2

如果我们只想淡化 div 的背景颜色，我们可以使用：

.field-error {
    color: #f44336;
    padding: 2px 5px;
    position: absolute;
    font-size: small;
    background-color: white;
}

.highlighter {
    animation: fadeoutBg 3s; /***Transition delay 3s fadeout is class***/
    -moz-animation: fadeoutBg 3s; /* Firefox */
    -webkit-animation: fadeoutBg 3s; /* Safari and Chrome */
    -o-animation: fadeoutBg 3s; /* Opera */
}

@keyframes fadeoutBg {
    from { background-color: lightgreen; } /** from color **/
    to { background-color: white; } /** to color **/
}

@-moz-keyframes fadeoutBg { /* Firefox */
    from { background-color: lightgreen; }
    to { background-color: white; }
}

@-webkit-keyframes fadeoutBg { /* Safari and Chrome */
    from { background-color: lightgreen; }
    to { background-color: white; }
}

@-o-keyframes fadeoutBg { /* Opera */
    from { background-color: lightgreen; }
    to { background-color: white; }
}

<div class="field-error highlighter">File name already exists.</div>

类似地，您可以在 from 和 to 部分实现任何样式更改，例如 color: green 将字体颜色更改为绿色，或者如果您想使用 :

1) 淡入：把opacity: 0给opacity: 1
2) Fade-out: 把opacity: 1给opacity: 0

有关详细信息，请参阅

加载时背景淡入

Background Fade In On Load

html

javascript

css

jquery

fadein