背景属性补充
背景尺寸属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>65-背景尺寸属性</title>
<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("../images/kt (1).jpeg") no-repeat;
}
ul li:nth-child(2){
background: url("../images/kt (1).jpeg") no-repeat;
/*
第一个参数为宽度
第二个参数为高度
*/
background-size: 200px 100px;
}
ul li:nth-child(3){
background: url("../images/kt (1).jpeg") no-repeat;
/*
第一个参数为宽度
第二个参数为高度
*/
background-size: 50% 100%;
}
ul li:nth-child(4){
background: url("../images/kt (1).jpeg") no-repeat;
/*
第一个参数为宽度等比拉伸
第二个参数为高度
*/
background-size: auto 100px;
}
ul li:nth-child(5){
background: url("../images/kt (1).jpeg") no-repeat;
/*
第一个参数为宽度等比拉伸
第二个参数为高度
*/
background-size: 150px auto;
}
ul li:nth-child(6){
background: url("../images/kt (1).jpeg") no-repeat;
/*
cover含义：
1.告诉系统图片需要等比拉伸
2.告诉系统图片需要拉伸到宽度和高度都填满元素
*/
background-size: cover;
}
ul li:nth-child(7){
background: url("../images/kt (1).jpeg") no-repeat;
/*
contain含义：
1.告诉系统图片需要等比拉伸
2.告诉系统图片需要拉伸到宽度或高度都填满元素
*/
background-size: contain;
}
</style>
</head>
<body>
<!--
1.什么是背景尺寸属性
背景尺寸属性其实是css3中新增的一个属性，专门用于设置背景图片的大小
-->
<ul>
<li>默认</li>
<li>具体像素</li>
<li>百分比</li>
<li>宽度等比拉伸</li>
<li>高度等比拉伸</li>
<li>cover</li>
<li>contain</li>
</ul>
</body>
</html>
背景图片定位区域属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>66-背景图片定位区域属性</title>
<style>
*{
margin: 0;
padding: 0;
}
ul li{
list-style: none;
float: left;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
border: 10px dashed #000;
padding: 50px;
margin-left: 20px;
background: url("../images/kt (1).jpeg") 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>
</head>
<body>
<ul>
<li>默认</li>
<li>padding</li>
<li>border</li>
<li>content</li>
</ul>
</body>
</html>
背景绘制区域属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>67-背景绘制区域属性</title>
<style>
*{
margin: 0;
padding: 0;
}
ul li{
list-style: none;
float: left;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
border: 10px dashed #000;
padding: 50px;
margin-left: 20px;
background: red url("../images/kt (1).jpeg") no-repeat;
}
ul li:nth-child(2){
/*
背景绘制区域属性是专门用来指定从哪个区域开始绘制背景的，
默认情况下会从border区域开始绘制背景
*/
background-clip: padding-box;
}
ul li:nth-child(4){
background-clip: content-box;
}
ul li:nth-child(1){
background-clip: border-box;
}
</style>
</head>
<body>
<ul>
<li>默认</li>
<li>padding</li>
<li>border</li>
<li>content</li>
</ul>
</body>
</html>
多重背景背景属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>68-多重背景图片</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 500px;
height: 500px;
border: 1px solid #000;
margin: 0 auto;
/*
多张背景图片之间用逗号隔开即可
注意点：
先添加的背景图片会盖住后添加的背景图片
建议编写多重代码时拆开编写，即：
background-image:url"",......;
background-repeat:no-repeat,......;
background-position:left top,......;
*/
background: url("../images/kt (2).jpeg") no-repeat left top,
url("../images/kt (3).jpeg") no-repeat right top,
url("../images/kt (4).jpg") no-repeat left bottom,
url("../images/kt (5).jpg") no-repeat right bottom,
url("../images/kt (6).jpg") no-repeat center center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>