添加高清背景

来源：互联网发布：pymongo 删除数据编辑：程序博客网时间：2024/04/19 01:53

(1)为网页添加一张高清背景，要覆盖满屏幕，所以推荐1600*1200以上的jpg

(2)下载好的图片放在html文件相同的目录下

(3)web上看的图片都是通过外部链接加以显示的

(4)需要创建CSS样式代码，来指定页面元素的呈现形式，在定义CSS之前，需要创建相应的容器，来容纳这些样式

(5)通常是在head创建一个style元素来作为样式的容器

(1)<body>标签包含了所有呈现浏览者看的内容信息

需要设置图片为background,然后通过url，调用同目录下的jpg

"{ }"花括号之内为样式的详细内容，背景属性，包含在URL里的图片路径

(2)为使图片尺寸符合屏幕，可设置背景图根据浏览器大小进行相应缩放

大图可小用，小图不能大用

在body里添加：background-size:cover

(3)图片走向问题，有的从左往右加载，有的从左上角开始

我们需要背景图剧中，设置background属性在纵向和横向两个方向上剧中

background:url(xx.jpg) center center;

<!DOCTYPE html><html lang='en'><head><meta charset="utf-8"><title>欢迎来到html世界</title></head><body><div><h1>美女爱我</h1><a href="http://www.baidu.com">我爱美女</a></div><style type='text/css'>html,body{height:100%;color:#FF0088;}body{background-size:cover;background:url(4.jpg); center center;}</style></body></html>

(4)浏览器默认不会给予body高度属性

为确保照片自适应屏幕显示，需要给body以及body的父级html设置height属性，使之充满全屏

PS:由于CSS具有继承机制，所以只需要指定html的height属性为100%

body将自动继承父级属性

阅读全文

0 0