<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景顏色</title>
<style>
div{
width: 500px;
height: 500px;
}
.box1{
background-color: red;
}
.box2{
background-color: rgb(0,255,0);
}
.box3{
background-color: rgba(0,0,255,0.7);
}
.box4{
background-color: #0ff;
}
</style>
</head>
<body>
<!--
1.如何設置標簽的背景顏色?
在CSS中有一個background-color:屬性, 就是專門用來設置標簽的背景顏色的
取值:
具體單詞
rgb
rgba
十六進制
快捷鍵:
bc background-color: #fff;
-->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景圖片</title>
<style>
div{
width: 500px;
height: 500px;
}
.box1{
background-image: url(images/girl.jpg);
/*background-image: url(http://img4.imgtn.bdimg.com/it/u=2278032206,4196312526&fm=21&gp=0.jpg);*/
}
</style>
</head>
<body>
<!--
1.如何設置背景圖片?
在CSS中有一個叫做background-image: url();的屬性, 就是專門用於設置背景圖片的
快捷鍵:
bi background-image: url();
注意點:
1.圖片的地址必須放在url()中, 圖片的地址可以是本地的地址, 也可以是網絡的地址
2.如果圖片的大小沒有標簽的大小大, 那么會自動在水平和垂直方向平鋪來填充
3.如果網頁上出現了圖片, 那么瀏覽器會再次發送請求獲取圖片
-->
<div class="box1"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景平鋪屬性</title>
<style>
/*
div{
width: 500px;
height: 500px;
}
.box1{
background-image: url(images/girl.jpg);
background-repeat: repeat-y;
}
*/
/*
body{
background-image: url(images/bg2.jpg);
}
*/
div{
width: 980px;
height: 60px;
background-image: url(images/1.png);
}
</style>
</head>
<body>
<!--
1.如何控制背景圖片的平鋪方式?
在CSS中有一個background-repeat屬性, 就是專門用於控制背景圖片的平鋪方式的
取值:
repeat 默認, 在水平和垂直都需要平鋪
no-repeat 在水平和垂直都不需要平鋪
repeat-x 只在水平方向平鋪
repeat-y 只在垂直方向平鋪
快捷鍵
bgr background-repeat:
應用場景:
可以通過背景圖片的平鋪來降低圖片的大小, 提升網頁的訪問速度
-->
<div class="box1"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景圖片定位屬性</title>
<style>
div{
/*width: 500px;*/
height: 500px;
}
.box1{
/*background-color: red;*/
/*background-image: url(images/girl.jpg);*/
/*background-repeat: no-repeat;*/
/*background-position: left top;*/
/*background-position: right top;*/
/*background-position: right bottom;*/
/*background-position: left bottom;*/
/*background-position: center center;*/
/*background-position: left center;*/
/*background-position: center top;*/
/*background-position: 100px 0;*/
/*background-position: 100px 200px;*/
/*background-position: -100px -100px;*/
background-image: url(images/yxlm.jpg);
background-position: center top;
}
</style>
</head>
<body>
<!--
1.如何控制背景圖片的位置?
在CSS中有一個叫做background-position:屬性, 就是專門用於控制背景圖片的位置
2.格式:
background-position: 水平方向 垂直方向;
3.取值
2.1具體的方位名詞
水平方向: left center right
垂直方向: top center bottom
2.2具體的像素
例如: background-position: 100px 200px;
記住一定要寫單位, 也就是一定要寫px
記住具體的像素是可以接收負數的
快捷鍵:
bp background-position: 0 0;
注意點:
同一個標簽可以同時設置背景顏色和背景圖片, 如果顏色和圖片同時存在, 那么圖片會覆蓋顏色
-->
<div class="box1">
<!--<img src="images/yxlm.jpg" alt="">-->
</div>
</body>
</html>
