css适应屏幕大背景，css大屏布局适配问题

css设置背景图片大小

在index.html中的标签中，输入css代码：body {background： url(image.jpg) no-repeat； background-size： 300px}。浏览器运行index.html页面，此时背景图片成功用css等比例缩小到了300px宽度的大小。

css2中是无法控制背景图片大小的，如果想实现这种效果，只能是更改图片了。css3中可以通过background-size来控制图片的大小。

可以通过background-size属性来设定背景图片的大小。它可以是像素（px）或者是百分比(%)，举例说明：background-size：950px* 200px这表示把背景图片大小调整为宽度950像素，高度200像素。

CSS设置图片实例描述 我们在一个HTML中放图片，1张为原始大小图片，1张为通过CSS设置宽度和高度图片，通过2张图片对比分析通过CSS改变图片大小。

html中的标签中，输入css代码：body {text-align： center；background： url(smallpng)； background-size： 60%；} 浏览器运行index.html页面，此时成功通过css控制了div居中显示，背景图片的大小为60%。

二是将图片设定display：block，设定图片的长宽为rem或者em。

相关问答

Q1: css问题:如何控制背景图片的大小

1、在index.html中的标签中，输入css代码：body {text-align： center；background： url(smallpng)； background-size： 60%；} 浏览器运行index.html页面，此时成功通过css控制了div居中显示，背景图片的大小为60%。

2、先看下我们图片的样式，现在并没有设置背景图片的大小。刷新页面，看下现在的图片，并没有显示完整，因为图片太大了，没有显示完。

3、css2中是无法控制背景图片大小的，如果想实现这种效果，只能是更改图片了。css3中可以通过background-size来控制图片的大小。

Q2: 如何让背景图片自适应网页的大小?

1、背景图宽度自适应方法：添加css样式background-size：100%；它的意思是规定背景图像的尺寸，但这个css样式使用时需要注意，有些浏览器是不支持，比如IE要求9的版本才可以支持。

2、如果通过css设置背景图，那么图片尺寸要足够大，目前大宽屏1920左右，所以宽度最好设置为1920，然后居中；如果通过div嵌入图片，那么将此div设置成绝对定位，z-index：-1。

3、而且背景图片不会随着滚动条滚动而滚动，实现背景图片的自适应。

4、可以设置下背景图片的宽度和高度都是100%（自适应）。举例：；此时设置的图片即可全屏幕显示。如果设置的是像素如“2000px”，可能会出现超出屏幕大小的现象，这样展示也就不美观了。

5、，你可以用DIV方图片，用z-index把它设置在最底层，通过设置div宽，高。（用width：100%模式）2，你也可以用html5网页，他的网页设置好了自动缩放设置，你只需写内容即可。

6、首先要确定一点，背景图片还没有强大到自适应网页的大小的程度。

Q3: div+css如何改变背景图片大小

CSS1 之前是不能设置背景图大小的，CSS3就可以通过background-size来设定图片大小，可以是像素或者是百分比。例如background-size：100px 200px；表示把背景图片大小调整为100x200px。

先看下我们图片的样式，现在并没有设置背景图片的大小。刷新页面，看下现在的图片，并没有显示完整，因为图片太大了，没有显示完。

首先，打开html编辑器，新建html文件，例如：index.html。在index.html中的style标签中，输入css代码：body{background： url(image.jpg) no-repeat；background-size： 200px 200px； }。

这里设置divcss5盒子里图片宽度300px高度100px /div /body /html 两处使用图片为同一张图片，以便观察效果。图片大小设置实例截图 从上图我们能看出CSS改变IMG图片大小，从而让图片比原始的大。

Q4: 如何将网页CSS背景图高斯模糊且全屏显示

如果不考虑兼容问题，可以参考css3的高斯滤镜。暂时只有webkit内核的浏览器支持，并且资源占用较大。

创建以下目录结构的测试页面。将测试图片显示在浏览器界面上，效果如下。通过CSS设置背景图片，默认效果如下，图片被自动重复以铺满窗口。通过CSS设置背景图片不重复，此时，图片将不能铺满窗口。

满屏大图是当前比较流行的一种网页形式，本文将使用css的background-size属性，教您如何简单实现该效果。

css适应屏幕大背景的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于css大屏布局适配问题、css适应屏幕大背景的信息别忘了在本站进行查找喔。