Question

现在我已经烦恼了几个小时，因为我一直在调整代码并且似乎没有任何地方可以使用。

我非常喜欢这个网站有流畅图像背景的方式：

我已经下载了代码，目前我还没有尝试制作幻灯片，而是单个图像背景，当您使用浏览器大小进行扩展和收缩时，就像在网站中一样。

如果我把他们在CSS中使用的代码应用到我自己的图像中，我会继续这样做。

body{
        background-image:url(https://blogs-images.forbes.com/ericsavitz/files/2011/03/smiley-face.jpg?width=960);
    background-repeat:no-repeat;
        width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;

        }

有人可以告诉我该怎么做才能让我的背景图像扩展并与网站签订合同吗？

Answer 1

这是我的答案，它可能不是最简单或最完整的但它会给出一个非常漂亮的结果来回答你的问题

基本上，您直接在div下创建新的body 并以这种方式设计：

.bgimg {
    z-index: 1;
    background: url(http://dondev.ovh/light_abstract.jpg);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

See it in action

这是一个只有css的答案，你可以使用JavaScript来获得更好的结果。

此致

Answer 2

如果您想要的只是让您的图片始终填满页面，只需从您自己的风格中删除一些内容即可实现＆＃34;封面＆＃34;效果。

试试这个：

body{
    background-image:url(https://blogs-images.forbes.com/ericsavitz/files/2011/03/smiley-face.jpg?width=960);
    background-repeat:no-repeat;
    color: transparent;
    background-size: cover;
    opacity: 0;
    z-index: 0;
}

https://jsfiddle.net/9cpz4gua/2/

CSS：获取中心定位的流体图像背景

2 个答案: