css让图片做整个页面的背景

2024-07-09 13:51| 来源: 网络整理| 查看: 265

问题：背景图片需要平铺整个页面作为背景。

久了未用，一时竟然没有反映过来，或者说以前有过类似的应用场景，缺乏总结，所以没有形成思维。这也说明一个问题，需要不断地实践，新增应用场景，并且及时总结，这样才能形成良好的思维反映，这应该也是又经验和没经验的一个差别，总的来说，及时总结，捋清逻辑，这样才能有助于提升自己的功力。另外有一点我认为也非常重要，就是要经常使用，常常敲一敲，能使用，能更好地使用规则，实践出真知，关键是要多总结经验。

尝试：

开始在小屏幕上css样式

body{ width:100%; height:100%; background:url('./assets/BG.png'); }

到大屏幕上发现背景repeat了，加上repeat之后发现图片并没有能撑满整个屏幕。

加上backgrouns-size:100% 100%之后能充满一屏幕，但是滚动的时候一屏下面的部分还是不能被覆盖，可以通过加上background-attachment:fixed来解决问题。

解决方案：css让图片做整个页面的背景

body{ width:100%; height:100%; background:url('./assets/BG.png'); background-repeat: no-repeat; background-size:100% 100%; background-attachment:fixed; }

别人的代码：

html, body { margin: 0; padding: 0; background: url('images/background.png'); repeat: no-repeat; background-attachment:fixed; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/background.jpg', sizingMethod='scale'); -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/background.jpg', sizingMethod='scale'); background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; }

其中images/background.jpg是你的图片url。此代码兼容IE6/7/8/9以及所有现代浏览器。／／我：没有经过测试

涉及规则：css中background相关规则

background-color

background-image

background-position：数值／百分比／值

background-attachment ：fixed／scroll／inherit

background-size：值／父元素百分比／cover／contain

background-origin:padding-box/content-box/border-box

background-origin 属性规定 background-position 属性相对于什么位置来定位。因此也决定了背景图从哪儿开始显示（此处为后面所加，这里也给了我一个启示，不要指望老师能够教会你所有，他也只熟悉他用过的那部分，当然别人的很多经验值得去学习的，别人的探索，别人踩过的坑，那都是对效率的提升，所谓的大牛大概就是踩的坑比较多，所以绕坑的经验比较丰富。）

注释：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。

backgroud-clip：规定背景绘制区域也可设置图片在哪显示

padding-box/content-box/border-box

【本文地址】

公司简介

联系我们