CSS3 の新しい背景屬性
CSS3 は背景にいくつかの変更を加えました。最も明らかな変更は、4 つの新しい屬性を追加するだけでなく、現(xiàn)在の屬性を調(diào)整および強化することです。
複數(shù)の背景畫像
CSS3では、1つのラベル要素に複數(shù)の背景畫像を適用できます。コードは css2.0 バージョンと似ていますが、參照される畫像は「,」カンマで區(qū)切る必要があります。最初の畫像は要素の上部に配置される背景であり、次のように、後続の背景畫像がその下に順番に表示されます:
background-image: url(top-image.jpg), url(middle-image. jpg), url(bottom-image.jpg);
新しい屬性: 背景クリップ
(1)background-clip: border;背景が境界線 border の下に表示され始めます
( 2)background-clip:padding; 背景は境界線ではなく、パディングの下に表示されます。 (3)background-clip:content; 背景は境界線やパディングではなく、コンテンツ領(lǐng)域の下に表示されます。
(4)background-clip: no-clip;background-clip: border に似たデフォルトの屬性値;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
.back {
border: 10px dotted black;
padding: 35px;
background: blue;
}
.back1 {
border: 10px dotted black;
padding: 35px;
background: blue;
background-clip: padding-box;
}
.back2 {
border: 10px dotted black;
padding: 35px;
background: blue;
background-clip: content-box;
}
</style>
</head>
<body>
<div class="back"></div>
<br>
<div class="back1"></div>
<br>
<div class="back2"></div>
<br>
</body>
</html>新しい屬性: 背景の原點
この屬性は、background-position と組み合わせて使用??する必要があります。背景位置を使用して、コンテンツ ボックスの境界線、パディング、またはコンテンツ領(lǐng)域から位置を計算できます。 (background-clip と同様) (1)background-origin:border; ボーダー位置から開始
(2)background-origin:padding; パディング位置から開始
(3)background-origin:開始from コンテンツ ボックスのコンテンツ領(lǐng)域の位置から開始します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
.sample1,.sample2,.sample3{
margin:20px;
padding:15px;
border: dashed 15px #993300;
width:450px;
height:150px;
color:#fff;
background:url(https://img.php.cn/upload/course/000/000/008/5801821694a3b224.jpg) no-repeat;
}
.sample1 {
-moz-background-origin:border;
background-origin:border-box;
}
.sample2 {
-moz-background-origin:padding;
background-origin:padding-box;
}
.sample3 {
-moz-background-origin:content;
background-origin:content-box;
}
</style>
</head>
<body>
<div class="sample1"></div>
<br>
<div class="sample2"></div>
<br>
<div class="sample3"></div>
<br>
</body>
</html>新しい屬性: 背景サイズ
背景サイズ屬性は、背景畫像をリセットするために使用されます。いくつかの屬性値があります:(1)background-size: contains; ラベル要素に合わせて背景畫像を縮小します (主にピクセル比)
(2)background-size: cover;ラベル全體の要素サイズ (主にピクセル比)
(3)background-size: 100px 100px; 背景畫像のサイズを示します
(4)background-size: 50% 100%;コンテンツタグ要素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
body
{
background:url(https://img.php.cn/upload/course/000/000/008/5801821694a3b224.jpg);
background-size:100px 60px;
background-repeat:no-repeat;
padding-top:40px;
}
</style>
</head>
<body>
<p>
<img src="https://img.php.cn/upload/course/000/000/008/5801821694a3b224.jpg" alt="CSS3" width="400" height="200">
</p>
<p>上面兩個圖片對比</p>
</body>
</html>
