13

无论显示此网页的屏幕大小如何，如何将图像作为网页背景？我想正确显示它。如何？

4

10 回答 10

25

使用这个 css 非常简单（用你的背景图片替换 image.jpg）

body{height:100%;
   width:100%;
   background-image:url(image.jpg);/*your background image*/  
   background-repeat:no-repeat;/*we want to have one single image not a repeated one*/  
   background-size:cover;/*this sets the image to fullscreen covering the whole screen*/  
   /*css hack for ie*/     
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.image.jpg',sizingMethod='scale');
   -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.jpg',sizingMethod='scale')";
}
于 2012-07-14T17:26:09.743 回答
20

嗯，为什么不将图像设置到底层并放弃所有烦恼

<img src='yourmom.png' style='position:fixed;top:0px;left:0px;width:100%;height:100%;z-index:-1;'>
于 2013-09-02T02:36:46.297 回答
4

通过 jQuery 插件 ;)

于 2012-06-03T11:01:41.870 回答
3

使用此 CSS 在网页中制作全屏背景。

body {
    margin:0;
    padding:0;
    background:url("https://static.vecteezy.com/system/resources/previews/000/106/719/original/vector-abstract-blue-wave-background.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
于 2017-01-28T07:07:35.260 回答
1

在您的 CSS 中使用以下代码

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
这是我找到它的链接：

于 2015-10-30T23:18:31.500 回答
0

快速搜索关键字背景生成器会显示此CSS3 生成的动态创建的背景图案。

通过保持图像小且可重复，在移动设备上加载它不会有问题，并且小图像文件大小可以解决内存问题。

这是该head部分的标记：

<style type="text/css">

    body {
      background-image:url('path/to/your/image/background.png');
      width: 100%;
      height: 100%;
    }

</style>

如果您要使用应保持纵横比的图像，例如人或物体，那么您不希望宽度和高度为 100%，因为这会使图像不成比例地拉伸。相反，请查看这个快速教程，该教程显示了使用 CSS 应用背景图像的不同方法。

于 2012-06-03T11:24:09.027 回答
0

将 div 设为 100% 宽和 100% 高。然后设置背景图像。

于 2012-06-03T11:00:57.480 回答
0

如果我将图像放在“body”内的“div”元素中，我发现了背景图像总是有白色边框的原因。但是如果我把它作为'body'的背景图像，图像可以是全屏的。

因为'body'的默认'margin'不为零。添加这个css后，即使我把它放在'div'中，背景图像也可以全屏。

body {
    margin: 0px;
}
于 2020-02-07T11:21:11.137 回答
0

我已遵循本教程：https ://css-tricks.com/perfect-full-page-background-image/

具体来说，第一个Demo对我帮助很大！

CSS
 {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
}

这可能会有所帮助！

于 2019-10-31T04:05:34.953 回答
0

CSS

.bbg { 
    /* The image used */
    background-image: url('...');

    /* Full height */
    height: 100%; 

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;    
}

HTML

<!doctype html>
<html class="h-100">
.
.
.
<body class="bbg">
</body>
.
.
.
</html>
于 2018-02-19T00:17:49.510 回答