1、單選題
將背景的繪制區域規定到內容框，應使用background-clip屬性中的哪個屬性值?
A content-box
B border-box
C padding-box
D none-box
參考答案：A
2、多選題
在沒有內填充(padding)的情況下，將背景的繪制區域從包含邊框到不包含邊框，如效果圖所示，下列代碼哪個可以實現?(選擇兩項)
效果圖
A background-clip:padding-box;
B background-clip:content-box;
C background-clip:border-box;
D background-position:border-box;
參考答案： AB
3、2-4編程練習
小伙伴們，根據gif效果圖，補充代碼，實現：
(1)當鼠標懸停在“border-box”區域，顯示元素的背景圖片被裁剪到邊框盒
(2)當鼠標懸停在“padding-box”區域，顯示元素的背景圖片被裁剪到內邊距框
(3)當鼠標懸停在“content-box”區域，顯示元素的背景圖片被裁剪到內容框
(4)當鼠標不停留在這3個區域時，沒有圖片顯示
效果圖如下：
任務：
第一步：當鼠標不懸停在三個區域時，背景圖片時隱藏的
第二部：當鼠標停留在“border-box”區域時，元素顯示的背景圖片會包含元素的邊框
第三部：當鼠標停留在“padding-box”區域時，元素顯示的背景圖片不會包含元素的邊框，但會包含元素的內邊距
第四部：當鼠標停留在“content-box”區域時，元素顯示的背景圖片不會包含元素的邊框盒內邊距
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>background-clip</title>
<meta name='description' content='background-clip'>
<meta name='keywords' content='background-clip'>
<style>
/* 給最外層的div設置樣式 */
.border,
.padding,
.content {
width: 300px;
height: 300px;
float: left;
margin-left: 50px;
}
a {
text-decoration: none;
font-size: 30px;
}
/* 放置背景圖片的div樣式 */
.div1,
.div2,
.div3 {
width: 200px;
height: 200px;
border: 10px solid rgba(0, 255, 0, 0.3);
padding: 50px;
margin-top: 50px;
background-image: url(images/weimobLogo.png);
}
.border:hover div,
.padding:hover div,
.content:hover div {
display: block;
}
/* 補充代碼 */
</style>
</head>
<body>
<div class='border'>
<a href=''>border-box</a>
<div class='div1'></div>
</div>
<div class='padding'>
<a href=''>padding-box</a>
<div class='div2'></div>
</div>
<div class='content'>
<a href=''>content-box</a>
<div class='div3'></div>
</div>
</body>
</html>
參考代碼：
.border div,
.padding div,
.content div {
display: none;
}
.border:hover div {
background-clip: border-box;
}
.padding:hover div {
background-clip: padding-box;
}
.content:hover div {
background-clip: content-box;
}
4、2-7編程練習
2-6選擇題
單選題
在CSS3中新增的背景圖片屬性中，哪個可以繪制背景圖像的起點?(選擇一項)
A background-clip
B background-size
C background-origin
D background-position
參考答案：C
5、2-7編程練習
小伙伴們，根據gif效果圖，寫出代碼，實現：
(1)當打開頁面時，背景圖片區域繪制到內邊距框
(2)當鼠標懸停在添加背景圖片的元素上時，背景圖片會被替換掉，新的背景圖片的位置會以內容左上角為原點，向右、向下各偏移10px
圖片地址分別為：
效果圖如下：
任務
第一步：寫出要設置背景圖片的HTML元素
第二步：給元素設置基本樣式
Tips：寬、高、邊框、內邊距
第三步：給元素加上背景圖片，背景圖片顯示范圍從內邊距框開始
第四部：當鼠標懸停在元素上時，圖片被替換，並且背景圖片的起點從內容區域的左上角開始向左、向下偏移10個像素。
參考代碼：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>background-clip</title>
<meta name='description' content='background-clip'>
<meta name='keywords' content='background-clip'>
<style>
div {
width: 500px;
height: 200px;
border:10px solid #9999fe;
}
.sample{
background-image: url('http://climg.mukewang.com/582c342b0001fd6507000210.jpg');
background-origin: padding-box;
}
.sample:hover {
background-image: url('http://climg.mukewang.com/582c34220001091605000150.jpg');
background-origin:content-box;
background-position:top 10px left 10px;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div class='sample'>
</div>
</body>
</html>
2-9單選題
在CSS3新增的background-size屬性中，哪個屬性是以父元素的百分比來設置圖像的寬度和高度?(選擇一項)
A cover
B length
C percentage
D contain
參考答案：C
2-10編程練習
小伙伴們，根據效果圖寫出代碼，實現：
(1)默認狀態圖片是不顯示的
(2)當鼠標懸停在不同的列表項上時，出現帶背景圖片的div元素，元素的背景圖片大小就是列表項上的標題文字。
比如：當鼠標懸停在“50% 50%”區域時，元素的背景圖片是父元素大小的50%。
效果圖如下：
任務
第一步：當鼠標懸停在屬性值區域上時，屬性值文字下方的元素要顯示出來。Tips：注意偽類選擇器與后代選擇器配合使用
第二部：鼠標懸停在不同屬性值的區域上時，顯示的元素的背景圖片大小時不一樣的，按照每個列表項的標題文字去設置，看下效果是否和你想的一樣。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>background-clip</title>
<meta name='description' content='background-clip'>
<meta name='keywords' content='background-clip'>
<style>
a {
text-decoration: none;
}
ul {
list-style: none;
}
div {
background-image: url(http://climg.mukewang.com/582c39e50001b08102000065.jpg);
width: 100px;
height: 100px;
display: none;
border: 2px solid red;
background-repeat: no-repeat;
}
/* 補充代碼 */
.length:hover div{
display:block;
background-size:100px 100px;
}
.percent:hover div{
display:block;
background-size:50% 50%;
}
.cover:hover div{
display:block;
background-size:cover;
}
.contain:hover div{
display:block;
background-size:contain;
}
</style>
</head>
<body>
<h2>background-size不同屬性值不同效果</h2>
<ul>
<li class='length'>
<h3><a href="">100px 100px</a></h3>
<div></div>
</li>
<li class='percent'>
<h3><a href="">50% 50%</a></h3>
<div></div>
</li>
<li class='cover'>
<h3><a href="">cover</a></h3>
<div></div>
</li>
<li class='contain'>
<h3><a href="">contain</a></h3>
<div></div>
</li>
</ul>
</body>
</html>
2-15編程練習
小伙伴們，根據效果圖寫出代碼，用所學的背景圖片屬性只是，實現div元素中呈現多個背景圖片
效果圖如下：
任務
第一步：寫出放置背景圖片的html元素，給元素設置足夠的寬和高
第二部：給元素加入多個背景圖片
任務提示
Tip：
(1)多個圖片路徑之間的符號。
(2)注意每個圖片設置。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>background-clip</title>
<meta name='description' content='background-clip'>
<meta name='keywords' content='background-clip'>
<style>
/* 此處寫代碼 */
html,
body {
margin: 0;
padding: 0;
}
div {
width: 700px;
height: 800px;
margin:0 auto;
background:url('images/111.png') 50% 0,
url('images/222.png') center top 180px ,
url('images/333.png') center top 360px ;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<!-- 此處寫代碼 -->
<div>
</div>
</body>
</html>