background
1.設定背景平鋪
background-repeat
round ：圖片會進行縮放后平鋪
space : 圖片會進行平鋪,中間留下空白空間
注：當滾動行為設為fixed,round和space沒有效果
2.設定滾動時的行為
background-attachment
scroll：父元素滾動時，跟隨滾動；子元素滾動時，不跟隨滾動，背景圖片跟隨父元素滾動
local：父元素滾動時，跟隨滾動；子元素滾動時，跟隨滾動，背景圖片一直跟隨滾動
fixed：父元素滾動時，不跟隨滾動；子元素滾動時，不跟隨滾動，背景圖片固定不變
3.設定圖片尺寸
background-size：寬度,高度
值/auto
如果設定成百分比的話，就是參照父容器的寬度和高度來
contains ：會按比例變換大小，使圖片全部在容器內，同時自適應容器大小
如果圖片大于容器，會造成空白
如果圖片小于容器 會放大圖片
cover 背景圖片會按比列縮放或擴大，會使圖片充滿容器
4.設定背景圖片原點
background-origin
border-box：圖片從border開始填充
padding-box：圖片從border開始填充
content-box：圖片從content開始填充
5.設定圖片裁切區域
background-clip
border-box：圖片顯示border以內的內容
padding-box：圖片顯示padding以內的內容
content-box：圖片顯示content以內的內容
background-origin 和background-clip 可以提升用戶的回應區域
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 1200px;
margin:30px auto;
}
.box > ul{
width: 100%;
display: flex;
flex-wrap: wrap;
}
.box > ul >li{
width: 300px;
height: 300px;
display: block;
border:1px solid #ccc;
box-sizing: border-box;
margin: 20px;
}
.box > ul >li >a{
width: 100%;
height: 100%;
box-sizing: border-box;
display: block;
background: url("../img/jingling.jpg");
background-repeat: no-repeat;
padding:47px;
background-origin: content-box;
background-clip: content-box;
/* 通過這三個值可以設定只展示背景圖片的一部分 */
}
.box > ul >li:nth-of-type(1) >a{
}
.box > ul >li:nth-of-type(2) >a{
background-position: -226px 0;
}
.box > ul >li:nth-of-type(3) >a{
background-position: -457px 0;
}
.box > ul >li:nth-of-type(4) >a{
background-position: 0 -226px;
}
.box > ul >li:nth-of-type(5) >a{
background-position: -226px -226px;
}
.box > ul >li:nth-of-type(6) >a{
background-position: -457px -226px;
}
.box > ul >li:nth-of-type(7) >a{
background-position: 0 -226px;
}
.box > ul >li:nth-of-type(8) >a{
background-position: -226px -226px;
}
.box > ul >li:nth-of-type(9) >a{
background-position: -457px -226px;
}
</style>
</head>
<body>
<div >
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/115106.html
標籤：Html/Css
上一篇：css之彈性盒模型
下一篇：css權重等級