背景淡入淡出

我试图让我的背景在进入网站时消失。我已经尝试了几种可行的方法。但是，我只是在以不同的分辨率为中心背景时遇到问题。正如您在进入我的网站时可以看到的那样，每当您调整浏览器的大小时，背景总是处于中间位置。网站：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; 
 
}

来源

2016-05-07 azuz53487

我不明白问题，因为地球上的图像，是不是？ – phpheini

是的，地球仪在图像上。但是，在某些代码中，无论您何时调整浏览器大小，全局都会向右移动。如果您例如点击我的网站，并尝试调整浏览器大小，则可以看到整个背景根据浏览器大小移动。 - 对不起，如果我没有解释得很好，尽我所能。 – azuz53487

好的或者不好的行为的截图以及photoshop中的想要的结果都会帮助我们理解。 –

如果你想有一个背景图像淡入在页面加载我会推荐不同的设置。您可以在不同于您网页其他页面的流程中使用单独的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; 
    } 
}

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

这里是关于Plunkr的工作示例。我必须将您使用的图像与https链接交换，以便加载它时不会出现问题。

来源

2016-05-07 16:44:58 ManBearPixel

非常感谢你的先生！这正是我期待的！非常感激！ – azuz53487

没问题的队友！ – ManBearPixel

一个问题，先生。我想知道如何让颜色变黑？我试过这样做：背景：＃000 url（http://studi0.ml/EzJsucI.jpg）无重复中心中心固定; - 然而，没有结果:) 谢谢！ – azuz53487

背景淡入淡出

回答

相关问题