南通力行網(wǎng)絡(luò)科技有限公司
CSS思維導(dǎo)圖(基礎(chǔ)版),7張圖看懂CSS框架
2033CSS思維導(dǎo)圖(基礎(chǔ)版),7張圖看懂CSS框架
查看全文CSS背景樣式：background屬性
背景樣式主要包括背景顏色和背景圖像。
1.background-color 設(shè)置元素的背景顏色。
background-color：顏色/transparent
說明：transparent是全透明
顏色值（顏色名/RGB/十六進(jìn)制）
背景區(qū)包括內(nèi)容、內(nèi)邊距（padding）和邊框（border）、不包含外邊距（margin）
2.background-image 設(shè)置元素的背景圖片。
background-image：url(圖片地址)/none
說明：url地址可以是相對地址也可以是絕對地址
元素的背景占據(jù)了元素的全部尺寸，包括內(nèi)邊距和邊框，但不包括外邊距
默認(rèn)地，背景圖像位于元素的左上角，并在水平和垂直方向上重復(fù)。
當(dāng)即設(shè)置了背景圖片又設(shè)置了背景顏色時，背景圖片會覆蓋背景顏色
3.background-position 設(shè)置背景圖片的起始位置
A. 這個屬性只能應(yīng)用于塊元素和替換元素，替換元素包括img、input、textarea、select和object。
B. 該屬性值可以設(shè)置為關(guān)鍵字，也可以設(shè)置為兩個像素值（”20px 30px“），設(shè)置為關(guān)鍵字時表示背景圖像相對于元素的左上角的距離（分別是水平距離和垂直距離）。
C. 該屬性值可取的關(guān)鍵字為：
top left：左上（表示圖像位于元素的左上角，下面的類似）
top center：靠上居中
top right：右上
left center：靠左居中
center center：正中
right center：靠右居中
bottom left：左下
bottom center：靠下居中
bottom right：右下
4.background-attachment 背景圖像是否固定或者隨著頁面的其余部分滾動
background-attachment：scroll/fixed
scroll： 默認(rèn)值，隨著圖片的滾動而滾動
fixed：當(dāng)頁面的其余部分滾動時，背景圖片不會移動
5.background-repeat 設(shè)置背景圖像是否重復(fù)及如何重復(fù)
該屬性可以取如下值：
??????? no-repeat：不平鋪
??????? repeat：在水平方向（x軸）和垂直方向（y軸）同時平鋪，默認(rèn)值
??????? repeat-x：在水平方向（x軸）平鋪
??????? repeat-y：在垂直方向（y軸）平鋪
6.background 簡寫屬性，作用是將背景屬性設(shè)置在一個聲明中。
background：[background-color] [background-image] [background-repeat] [background-attachment] [background-position]
說明：各值之間用空格分割，不分先后順序
示例代碼
<html>
<head lang="en">
<meta charset="UTF-8">
<title>背景屬性</title>
<style>
body{
height: 1000px;
/*背景顏色 默認(rèn)為透明 transparent*/
background-color: red;
/*background-color: #ff0000;*/
/*background-color: rgb(255,0,0);*/
/*background-color: rgba(255,0,0,.5);*/
/*背景圖片 默認(rèn)水平垂直平鋪*/
/*background-image: url("images/pic2.jpeg");*/
/*背景圖片平鋪*/
/*background-repeat: no-repeat;*/
/*background-repeat: repeat-x;*/
/*background-repeat: repeat-y;*/
/*背景圖片的大小*/
/*background-size:1000px ;*/
/*background-size: 100% 100%;*/
/*背景圖片固定*/
/*background-attachment:fixed ;*/
background:red url("images/pic2.jpeg") no-repeat fixed ;
background-size: 100% 100%;
}
.box{
width: 800px;
height: 600px;
/*background-color: rgba(255,255,255,.5);
background-image: url("images/pic1.jpg");
background-repeat: no-repeat;*/
/*background-size: contain;*/
background: rgba(255,255,255,.5) url("images/pic1.jpg") no-repeat;
/*背景圖片定位*/
/*background-position: x y;*/
/*當(dāng)只有水平方向，垂直方向默認(rèn)居中*/
/*background-position: 30px 30px;*/
/*background-position: 30px;*/
/*background-position: right bottom;*/
/*background-position: center;*/
/*簡寫為*/
/*background：顏色 圖片 平鋪 大小 定位 固定;*/
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
相關(guān)推薦
-
-
-
什么是CSS3?CSS3和CSS有什么區(qū)別
1489層疊樣式表）技術(shù)的升級版本，于1999年開始制訂，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等模塊??。
查看全文 -
