背景颜色
- 如何设置标签的背景颜色?
- 在CSS中有一个
background-color:属性, 就是专门用来设置标签的背景颜色的 - 背景颜色属性取值
- 具体颜色单词
- rgb
- rgba
- 使用十六进制表示颜色
- 背景颜色快捷键
bc background-color: #fff;
- 在CSS中有一个
<style>
.box1{
width: 30px;
height: 30px;
background-color: red;
}
.box2{
width: 30px;
height: 30px;
background-color: #00ffff;
}
.box3{
width: 30px;
height: 30px;
background-color: rgb(0,255,255);
}
.box4{
width: 30px;
height: 30px;
background-color: rgba(30,233,233,0.5);
}
</style>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
背景图片
- 如何设置背景图片?
- 在CSS中有一个叫做
background-image: url();的属性, 就是专门用于设
置背景图片的 - 快捷键:
bi--> background-image: url();
- 在CSS中有一个叫做
-
注意点:
- 1.图片的地址必须放在url()中, 图片的地址可以是本地的地址, 也可以是网络的地址
- 2.如果图片的大小没有标签的大小大, 那么会自动在水平和垂直方向平铺来填充
- 3.如果网页上出现了图片, 那么浏览器会
再次发送请求获取图片
<style>
div{
width: 1000px;
height: 1000px;
background-image: url(image/picture.jpg);
/*background-image: url(http://img4.imgtn.bdimg.com/it/u=2278032206,4196312526&fm=21&gp=0.jpg);*/
}
</style>
<div></div>
- 多重背景图片
- 在CSS3中支持添加多个背景图片,多张背景图片之间用逗号隔开即可
- 注意点:
- 先添加的背景图片会盖住后添加的背景图片
- 建议在编写多重背景时将背景属性拆开编写
background-image
background-repeat
background-position
背景平铺
- 如何控制背景图片的平铺方式?
- 在CSS中有一个
background-repeat属性, 就是专门用于控制背景图片的平铺方式的 - 平铺属性取值
-
background-repeat: repeat;默认, 在水平和垂直都需要平铺 -
background-repeat: no-repeat;在水平和垂直都不需要平铺 -
background-repeat: repeat-x;只在水平方向平铺 -
background-repeat: repeat-y;只在垂直方向平铺
快捷键 bgr background-repeat: -
- 在CSS中有一个
- 应用场景:
- 可以通过背景图片的平铺来降低图片的大小, 提升网页的访问速度
<style>
div{
height: 1000px;
background-image: url(image/1.png);
/*background-repeat: no-repeat;*/
/*background-repeat: repeat-x;*/
background-repeat: repeat-y;
}
</style>
<div></div>
背景定位
- 如何控制背景图片的位置?
- 在CSS中有一个叫做
background-position:属性, 就是专门用于控制背景图片的位置
- 在CSS中有一个叫做
- 定位属性格式
background-position: 水平方向 垂直方向;
- 属性取值
- 具体的方位名词
- 水平方向: left center right
- 垂直方向: top center bottom
- 具体的像素
- 例如: background-position: 100px 200px;
- 记住一定要写
单位, 也就是一定要写px,记住具体的像素是可以接收负数的
快捷键: bp background-position: 0 0; - 具体的方位名词
-
注意点:- 同一个标签可以同时设置背景颜色和背景图片, 如果颜色和图片同时存在, 那么
图片会覆盖颜色
- 同一个标签可以同时设置背景颜色和背景图片, 如果颜色和图片同时存在, 那么
<style>
.box1{
height: 500px;
background-image: url(image/yxlm.jpg);
background-position: center 500px;
/*background-position: left top;*/
/*background-position: center center;*/
/*background-position: 100px 200px;*/
}
</style>
<div class="box1"></div>
背景绘制区域
- 背景绘制区域属性是专门用于指定从哪个区域开始绘制背景的, 默认情况下会从
border区域开始绘制背景 - 我们也可以通过
background-clip属性来指定绘制区域从哪里开始-
background-clip: padding-box;从内边距开始绘制背景 -
background-clip: content-box;从文本内容区域开始绘制背景 -
background-clip: border-box;默认从边框区域开始绘制背景
-
<style>
*{
margin: 0;
padding: 0;
}
ul li{
list-style: none;
float: left;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
border: 20px dashed #000;
padding: 50px;
margin-left: 20px;
background-color: red;
}
/*默认是从border绘制*/
ul li:nth-child(2){
background-clip: padding-box;
}
ul li:nth-child(3){
background-clip: content-box;
}
ul li:nth-child(4){
background-clip: border-box;
}
</style>
<ul>
<li>默认</li>
<li>padding</li>
<li>border</li>
<li>content</li>
</ul>
背景图片定位区域属性
- 告诉系统背景图片从什么区域开始显示,默认情况下就是从
padding区域开始显示 - 我们也可以通过
background-origin:属性来指定背景图片从哪里开始显示-
background-origin: padding-box;从内边距区域显示 -
background-origin: border-box;从边框距区域显示 -
background-origin: content-box;从文本内容区域显示
-
<style>
*{
margin: 0;
padding: 0;
}
ul li{
list-style: none;
float: left;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
border: 20px dashed #000;
padding: 50px;
margin-left: 20px;
background: url("image/dog.jpg") no-repeat;
}
ul li:nth-child(2){
/*
告诉系统背景图片从什么区域开始显示,
默认情况下就是从padding区域开始显示
*/
background-origin: padding-box;
}
ul li:nth-child(3){
background-origin: border-box;
}
ul li:nth-child(4){
background-origin: content-box;
}
</style>
<ul>
<li>默认</li>
<li>padding</li>
<li>border</li>
<li>content</li>
</ul>
背景尺寸
- 什么是背景尺寸属性?
- 背景尺寸属性是CSS3中新增的一个属性, 专门用于设置背景图片大小
- 背景尺寸属性格式
background-size: 100px 100px;- 第一个参数代表宽度,第二个参数代表高度
- 属性取值
- 具体像素值: background-size: 100px 100px;
- 百分比值: background-size: 100% 50%;
- 宽度或者高度等比拉伸: background-size: 100% auto;
- cover: background-size: cover;
- cover含义:
1.告诉系统图片需要等比拉伸
2.告诉系统图片需要拉伸到宽度和高度都填满元素
- cover含义:
- contain: background-size: contain;
- contain含义:
1.告诉系统图片需要等比拉伸
2.告诉系统图片需要拉伸到宽度或高度都填满元素
- contain含义:
<style>
*{
margin: 0;
padding: 0;
}
ul{
width: 800px;
height: 500px;
margin: 0 auto;
}
ul li{
list-style: none;
float: left;
width: 200px;
height: 200px;
margin: 30px 30px;
border: 1px solid #000;
text-align: center;
line-height: 200px;
}
ul li:nth-child(1){
background: url("image/dog.jpg") no-repeat;
}
ul li:nth-child(2){
background: url("image/dog.jpg") no-repeat;
/*
第一个参数:宽度
第二个参数:高度
*/
background-size: 100px 100px;
}
ul li:nth-child(3){
background: url("image/dog.jpg") no-repeat;
background-size: 100% 50%;
}
ul li:nth-child(4){
background: url("image/dog.jpg") no-repeat;
background-size: 100% auto;
}
ul li:nth-child(5){
background: url("image/dog.jpg") no-repeat;
background-size: auto 100px;
}
ul li:nth-child(6){
background: url("image/dog.jpg") no-repeat;
/*
cover含义:
1.告诉系统图片需要等比拉伸
2.告诉系统图片需要拉伸到宽度和高度都填满元素
*/
background-size: cover;
}
ul li:nth-child(7){
background: url("image/dog.jpg") no-repeat;
/*
contain含义:
1.告诉系统图片需要等比拉伸
2.告诉系统图片需要拉伸到宽度或高度都填满元素
*/
background-size: contain;
}
</style>
<ul>
<li>默认</li>
<li>具体像素</li>
<li>百分比</li>
<li>宽度等比拉伸</li>
<li>高度等比拉伸</li>
<li>cover</li>
<li>contain</li>
</ul>
背景属性连写
- 背景属性连写的格式
- background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;
- 快捷键:
- bg+ background: #fff url() 0 0 no-repeat;
- 注意点：
- background属性中， 任何一个属性都可以被省略
- 什么是背景关联方式？
- 默认情况下背景图片会随着滚动条的滚动而滚动， 如果不想让背景图片随着滚动条的滚动而滚动， 那么我们就可以修改背景图片和滚动条的关联方式
- 如何修改背景关联方式？
- 在CSS中有一个叫做
background-attachment的属性， 这个属性就是专门用于修改关联方式的 - 关联方式取值：
-
background-attachment: scroll;默认值， 会随着滚动条的滚动而滚动 -
background-attachment: fixed;不会随着滚动条的滚动而滚动 - 快捷键:
ba background-attachment;
-
- 在CSS中有一个叫做
背景图片和插入图片的区别
- 背景图片仅仅是一个装饰, 不会占用位置
插入图片会占用位置- 背景图片有定位属性, 所以可以很方便的控制图片的位置
插入图片没有定位属性, 所有控制图片的位置不太方便- 插入图片的语义比背景图片的语义要强, 所以在企业开发中如果你的图片
想被搜索引擎收录, 那么推荐使用插入图片
文字背景裁剪属性
浏览器私有属性前缀
- -moz代表firefox浏览器私有属性
- -ms代表IE浏览器私有属性
- -webkit代表chrome、safari私有属性
- 如何设置背景属性绘制区域为文字区域?
-webkit-background-clip: text;
- 如何设置文本填充颜色为透明色
-webkit-text-fill-color: transparent;
<style>
div{
width: 400px;
height: 400px;
border: 1px solid #000;
margin: 100px auto;
text-align: center;
line-height: 400px;
font-size: 150px;
background: url("image/4.jpg") center center;
font-weight: bold;
/*
添加私有前缀之后,就代表当前的私有属性只对当前浏览器有效
-moz代表firefox浏览器私有属性
-ms代表IE浏览器私有属性
-webkit代表chrome、safari私有属性
*/
/*设置背景属性为文本绘制*/
-webkit-background-clip: text;
/*设置文本填充颜色为透明色*/
-webkit-text-fill-color: transparent;
}
</style>
<div>NBA</div>
CSS精灵图
- 什么是CSS精灵图
- CSS精灵图是一种图像合成技术
- CSS精灵图作用
- 可以减少请求的次数, 以及可以降低服务器处理压力
- 如何使用CSS精灵图
- CSS的精灵图需要配合
背景图片和背景定位来使用
- CSS的精灵图需要配合
精灵图
