给网页添加一张背景图

有时候我们要做一个简单的占位页面出来,这个页面不需要任何的内容,只要简单的一章背景图片即可,但是简单的东西却往往更难以实现。

这是我在直接写一个页面时候遇到的问题,代码是这样的:

看上去很完美的解决办法对吧?但是实际上却遇到了一个坑爹的问题——白边!而且,还比浏览器的宽度宽了那么一条缝!

好吧,我把div去掉——得,现在不会超过宽度了,但是四周都!是!白!边!啦!

经查看页面元素才找到了这么个鬼……好吧,作为一名业余的前端,我表示这个问题困扰了我半小时?

出现莫名其妙的css
出现莫名其妙的css

用户代理样式

到底这个用户代理样式是个什么东西?明明我没有写啊!

各种HTML标签:h1-h6,p,ul,ol,dl„即使没有给他们定义样式属性值,他们在浏览器中显示时,也会具有各种样式属性(主要是字体大小和各种间距)。这是因为浏览器和CSS给这些标签设置了默认的样式属性值。

就是说,这是浏览器自带的!

你妹呀?给我自带个白边你有病吧!黑我大IE啊……

总之,在经历了写div不行直接写背景不行,给body加背景也不行的纠结过后,我终于意识到我应该写一个css来覆盖掉浏览器的自带css。

覆盖掉浏览器自带的css

所以,我们得再额外地给页面增加一个body css出来:

那么,我们把它写入页面里:

这样,页面终于能够安安稳稳地显示一个全屏的背景图片了?

发布者:R0uter

如非声明,本人所著文章均为原创手打,转载请注明本页面链接和我的名字。

留下评论

电子邮件地址不会被公开。 必填项已用*标注