200字范文 > CSS HTML实现背景图片的填充

CSS HTML实现背景图片的填充

时间：2021-01-02 08:30:31

相关推荐

CSS HTML实现背景图片的填充

引言：

今天想写个人的欢迎界面，又折腾起了前端，然而真的捉急呀

为了美观点，花多点时间吧，又是凌晨三点了0.0

CSS实现单张背景图片的填充

实现方式一：

直接使用body元素的background-image属性，多个浏览器兼容，基本满足要求

添加background-color: #22C3AA;在加载图片前显示颜色

BUG：页面太小时下方会留有空隙

详细属性w3school里面的background属性

<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>hello world</title> <style type="text/css">body {margin: 0;background-image: url('bg.jpg'); background-repeat:no-repeat;background-position:0% 0%;background-size:cover;background-color: #22C3AA;}</style></head> <body></body> </html> </span>

实现方式二：

使用DIV，图片能自适应浏览器的大小，不会出现body的bug

BUG：IE11不兼容，下方会有一个绿线(body背景颜色)，十分不美观

参见：HTML中使背景图片自适应浏览器大小

<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>hello world</title> <style type="text/css">body {margin: 0;background-color: #22C3AA;}</style></head> <body></body> </html> </span>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。