Question

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

＆＃13;

gdb

＆＃13;

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链接交换，因此加载它时不会出现问题。

Answer 2

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

.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）淡出：将opacity: 1赋予opacity: 0

有关更多详细信息，请参见https://stackoverflow.com/a/58525787/1904479

背景淡入负载

2 个答案: