背景淡入负载
我试图让我的背景淡入进入网站。我尝试过几种行之有效的方法。然而，我只是很难把背景设定在不同的分辨率上。正如你现在可以看到进入我的网站，每当你调整你的浏览器大小，背景将在任何时候都在中间。网站：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;
}
回答 2
Stack Overflow用户
发布于 2016-05-07 16:44:58
如果您想让背景图像在页面加载时淡入，我建议您使用不同的设置。您可以在一个与页面其他部分不同的流中拥有一个单独的div，并让它在页面加载时显示为1的不透明度。
<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声明添加多填充。(即-moz-animation-name__、-webkit-animation-name__等)
下面是普朗克上的一个工作示例。我必须用https链接交换您使用的图像，这样就不会出现加载它的问题。
Stack Overflow用户
发布于 2019-10-23 15:04:07
如果我们只是试图淡化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
https://stackoverflow.com/questions/37090699
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号