一、基本介绍

background属性是css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，background是一个复合属性

它可以分解成如下几个设置项：

background-color	设置背景颜色
background-image	设置背景图片地址
background-repeat	设置背景图片如何重复平铺
background-position	设置背景图片的位置
background-attachment	设置背景图片是固定还是随着页面滚动条滚动

以上属性可以合并写：“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”

“#00ff00”是设置background-color；

“url(bgimage.gif)”是设置background-image；

“no-repeat”是设置background-repeat；

“left center”是设置background-position；

“fixed”是设置background-attachment，各个设置项用空格隔开，有的设置项不写也是可以的，它会使用默认值。

二、案例 1

a.代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><style>.box{/* 设置宽高 */width: 400px;height: 200px;/* 设置边框 */border: 1px solid #000;/* 水平居中 */margin: 50px auto 0;background-image: url(../../../images/bg.jpg);/* 背景图片默认全部填充 */background-repeat: repeat-y;/* 设置图片如何重复铺垫 */background-repeat: repeat-x;/* 只重复铺垫x轴repeat-x，只平铺y轴repeat-y ，no-repeat只平铺一次，repeat缺省值平铺所有*//* 水平方向：left center right垂直方向：top center bottom还可以直接设置background-position: 10px 10px;background-position: -10px 10px;*/background-position: left center;/* 设置水平 垂直方向的对齐方式 （针对只有一个图片平铺）来设置图片的位置*/background: url(../../../images/bg.jpg) -20px 10px no-repeat cyan ;/* 对于上面的进行合并可以打乱写 */}</style><title>backgrounp属性</title></head><body><div class="box"><!-- <img src="../../../images/bg.jpg" alt="图片">虽然插入了图片但是不支持在图片上写字 -->html5</div></body>
</html>

b.结果

c.总结

background-image: url(路径);	背景图片默认全部填充
background-repeat: repeat-x;	设置图片如何重复铺垫只重复铺垫x轴repeat-x 只平铺y轴repeat-y no-repeat只平铺一次 repeat缺省值平铺所有
background-position: left center;	设置水平垂直方向的对齐方式（针对只有一个图片平铺）来设置图片的位置	水平方向：left center right
		垂直方向：top center bottom
		background-position: 10px 10px; background-position: -10px 10px;
对于上面的进行合并可以打乱写 background: url(../../../images/bg.jpg) -20px 10px no-repeat cyan ;

三、案例二背景图定位

a.要求

<!DOCTYPE html>
<html><head><meta charset="utf-8"><style>.box{width: 100px;height: 100px;border: 5px solid #000;margin: 50px auto 0px;background: url(../../../images/location_bg.jpg) 10px 10px no-repeat;}</style><title>背景图定位</title></head><body><div class="box"></div></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><style>.box{width: 100px;height: 100px;border: 5px solid #000;margin: 50px auto 0px;background: url(../../../images/location_bg.jpg) -103px -169px no-repeat;}</style><title>背景图定位</title></head><body><div class="box"></div></body>
</html>

四、雪碧图背景列表

<!DOCTYPE html>
<html><head><meta charset="utf-8"><style>.list{width: 300px;height: 305px;list-style: none;margin: 50px auto 0px;padding: 0px;/* background: cyan; */}.list li{height: 60px;border-bottom: 1px dotted #000;/* dotted电线 */line-height: 60px;text-indent: 50px;/* 首行缩进50px */background: url(../../../images/bg01.png) no-repeat cyan left 10px;/* 数字和方位可以掺和写 */}.list .icon02{/* 类的权重值高于标签 */background-position: 0px -70px;/* 权重值不够 *//* 点击二图片然后检查直接改值然后变 */}.list .icon03{background-position: 0px -152px;}.list .icon04{background-position: 0px -235px;}.list .icon05{background-position:  0px -317px;}</style><title>雪碧图背景列表</title></head><body><!-- ul.list>li{美人鱼}*5 --><ul class="list"><li>美人鱼</li><li class="icon02">美人鱼</li><li class="icon03">美人鱼</li><li class="icon04">美人鱼</li><li class="icon05">美人鱼</li></ul></body>
</html>

HTML学习之路-11background属性相关推荐

前端Vue学习之路(二)-Vue-router路由
Vue学习之路 (二) Vue-router(基础版) 一.增加静态路由二.动态路由+路由嵌套+404页面三. 编程式导航四.命名路由五.命名视图六.重定向和起别名 1.重定向 2.起别名 ...
[EntLib]微软企业库5.0 学习之路——第五步、介绍EntLib.Validation模块信息、验证器的实现层级及内置的各种验证器的使用方法——上篇...
本文是为后面的学习之路做铺垫,简单介绍下企业库中的Validation模块的一些相关知识,包括Validation模块的简介.用途.使用方法.默认提供的多种验证器的介绍等. 一.简介及用途在实际的项 ...
我的mongo学习之路
mongo学习之路 mongodb的安装,在这里就不做介绍了,不管是windows还是mac,网上都有教程,可以自行学习一下~~~ 一.启动 mongod 复制代码二.链接 mongo 复制代码三 ...
开始了大概三四天的Rails学习之路
最近因为一位极光推送朋友,我开始了大概三四天的Rails学习之路,最终达到的水平是可以比较轻松地做出大部分功能,然后自我感觉可以自如地按照Rails的设计思想去思考.由于编程的日益流行,我结识了越来越 ...
ros和java通讯_ROS学习之路（二）——通信架构（上）
1. master&&node mater中文名又称为节点管理器,作为管家管理所需要的进程,其作用有两个: 每个node启动时都要向master注册. 管理node之间的通信. nod ...
JavaWeb学习之路——SSM框架之SpringMVC(八)
SpringMVC参数传递:把内容写到方法(HandlerMethod)参数中,SpringMVC只要有这个内容,则会注入,在这里使用注解的方式来传递参数前提使用springmvc注解功能,相应配置 ...
JavaWeb学习之路——SSM框架之Spring(五)
前情提要请看JavaWeb学习之路--SSM框架之Spring(四) 整合Spring和Mybatis框架 1.在项目的 ...
JavaWeb学习之路——SSM框架之Mybatis(三)
数据库配置和相关类创建看上篇:JavaWeb学习之路--SSM框架之Mybatis(二) https://blog.csdn.net/kuishao1314aa/article/details/832 ...
F#学习之路(3) 如何组织程序(下)
二.名称空间(namespace) 名称空间,将一组逻辑上相关的类型.模块放在一起,主要是为了解决名称冲突的问题,同时也便于更好的理解程序结构.F#的名称空间概念及定义与C#基本相似. 1.定义名称空 ...

HTML学习之路-11background属性

一、基本介绍

二、案例 1

a.代码

b.结果

c.总结

三、案例二背景图定位

a.要求

四、雪碧图背景列表

HTML学习之路-11background属性相关推荐

最新文章

热门文章