I.背景プロパティ省略形式
1.backgound:背景色の背景画像タイル張り関連モード測位モード
2.注意点:
すべての値は、ここでは省略しますが、少なくともAで必要とされています
3.連想背景は何ですか
デフォルトでは、背景画像は、あなたがいない場合ので、その後、私たちは協会の彼らの方法を変更することができ、スクロールバーやスクロールをスクロールします
4.フォーマット:
背景アタッチメント:值。
値の範囲:
スクロール:デフォルトはスクロールバーやスクロールになります。
固定:スクロールバーでスクロールし、スクロールしないでください。
5.例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>d99_background_abbreviation</title>
<style>
div{
width: 1100px;
height:5000px;
background:red url("image/snow.jpg") no-repeat fixed center center;/*背景颜色 图片地址 平铺方式 关联方式 定位方式*/
/*这里的所有值都可以省略,但是至少需要一个*/
/*background-attachment: fixed;*/
}
</style>
</head>
<body>
<div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
rhuyrt
</div>
</body>
</html>
web前端开发学习Q-q-u-n: ⑦⑧④-⑦⑧③-零①②,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频
第二に、ショートカットキー
1.bc:背景色
2.bi:background-image
3.bgr:背景リピート
4.ba:background-arttachment
5.bg +:5つのプロパティの背景:()
6.bp:背景位置
第三に、背景画像と挿入画像間の違い
div.box$*2
等価に
<div class="box1"></div>
<div class="box2"></div>
2.区別:
(1)背景画像は、「それはポジションを取ることはありません、単なる飾りで、画像を挿入位置を取るだろう
(2)位置制御を行うことができる背景画像属性を、位置決め、及び画像位置制御特性なしで画像を挿入する、制御不良
背景画像よりも強い(3)画像を挿入セマンティックセマンティクスあなたは絵が検索エンジンでインデックス化させたい場合は、その再開発する企業間で、画像を挿入を使用することをお勧めします。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>d100_difference_of_img_label_and_background_image</title>
<style>
div{
width:800px;
height: 500px;
}
.box1{
background-image: url("image/snow.jpg");
}
</style>
</head>
<body>
<div class="box1">我是一个文字</div>
<hr>
<hr>
<hr>
<hr>
<div class="box2">
<img src="image/snow.jpg" alt="">
我是一个文字
</div>
</body>
</html>
web前端开发学习Q-q-u-n: ⑦⑧④-⑦⑧③-零①②,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频