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

因为我一直在摆弄代码，并且似乎根本没有任何地方，所以现在这让我烦恼几个小时。CSS：获取一个中心定位的流体图像背景

我真的很喜欢这个网站有一个流体图像背景的方式：

我已经下载的代码和我不是目前正在制作幻灯片，而是单一的图像背景，当你玩弄浏览器的大小就像在网站中一样展开和合同。

如果我把他们在他们的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; 

     }

可能有人请告诉我怎么做才能让我的背景图像膨胀和收缩有关的网站没有中心呢？

来源

2017-03-05 Steve Jobs

你想在CSS只，与一些JS会容易得多吗？并且，你是否希望自己的形象成为身体的背景？其他选项会更容易和更好 –

老实说，不管最简单的方法是什么，我只想要一个空白网页，除了一个图像，例如我链接到背景上的图像，所以当您更改浏览器的大小时，背景图像比例是如果有意义的话，与网站中的相同。 –

我现在会发布一个响应，提供一个小提琴链接给你，你将遇到1个问题，你必须处理，图像的比例，我会为你留下这个问题！你有很多方法来处理它，所以我不会坚持任何他们的方式 –

这里是我的回答，它可能不是最容易或最完整的，但它给出了一个非常漂亮的寻找结果回答您的问题

基本上，您可以直接在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，效果更佳。

Regards

来源

2017-03-06 00:14:12

这完美地回答了我的问题。请问为什么Javascript会给我更好的结果，以及如果我以这种方式使用它，是否有什么我应该担心的？ –

@SteveJobs你不必担心任何东西，但图片的比例..你需要知道你使用的背景图片如果你有一个可以滚动的页面考虑改变'位置：绝对'到'位置：固定' Javascript不会给出更好的结果，但是更灵活一个 –

最后，当你谈论图片比例时，你会推荐做什么？假设我有一个大致风景1920x1080像素的图像，我需要做什么？ –

如果您只想让您的图片始终充满网页，只需从自己的风格中删除一些东西以实现“封面”效果。

试试这个：

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/

来源

2017-03-06 00:12:58

这对我来说似乎没有预期的效果，因为当我在我的.html文件中尝试它时，并且调整浏览器大小时，当浏览器变得足够小时，会出现很多空白， t上面给出的例子是什么。 –

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

回答

相关问题