CSS: 获取居中的流体图像背景

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

如果您只想让您的图像始终填满页面，只需从您自己的样式中删除一些内容即可实现 "cover" 效果。

试试这个：

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/

Answer 2

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

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

.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 以获得更好的结果。

此致

CSS: 获取居中的流体图像背景

CSS: Get a center-positioned fluid image background

html

css

image

background-image