首頁  >  文章  >  web前端  >  CSS3中關於新增背景系列background的詳解

CSS3中關於新增背景系列background的詳解

黄舟
黄舟原創
2017-05-27 13:36:403108瀏覽

1. 回顧之前學習過的background屬性

1.1 background-color
1.2 background-image
1.3 background-repeat
1.4 background-position
1.5 background-attchment
1.6 background

2. CSS3新增的background屬性

#2.1 background- origin
2.2 多重背景
2.3 background-size

#1.1 背景顏色屬性:background-color

顏色的表示方法有3種:單字、rgb表示法、十六進位表示法

1. 單字: 能夠用單字來表達的,都是簡單顏色

2. rgb表示法

rgb表示三原色「紅」red、「綠」green、「藍」blue 。
光學顯示器,每個像素都是由三原色的發光原件組成的,靠明亮度不同調成不同的顏色的。

用逗號隔開,r、g、b的值,每個值的取值範圍0~255,一共256個值

绿色:
background-color: rgb(0,255,0);  
蓝色:
background-color: rgb(0,0,255);

黑色:(光学显示器,每个元件都不发光,黑色)
background-color: rgb(0,0,0);

3. 十六進制表示法

所有用#開頭的值,都是16進位的。

红色:
background-color: #ff0000;

16进制表示法,也是两位两位看,看r、g、b,但是没有逗号隔开。
ff就是10进制的255 ,00 就是10进制的0,00就是10进制的0。所以等价于rgb(255,0,0);

補充:
十進位中的基本數字(共10個):0、1、2、3、4、5、6、7、8、9
十六進位中的基本數字(共16個):0、1、2、3、4、5、6、7、8、9、a、b、c、d、d、e、f

十六進位中,13 這個數字表示什麼?
表示1個16和3個1。 那就是19。 這就是位權的概念,開頭這位表示多少個16,最後這位表示多少個1。

1.2 background-image

用於為盒子加上背景圖片。背景天生是會鋪滿的。

background:url(images/1.jpg);

1.3 background-repeat

設定背景圖是否重複的,重複方式的。

background-repeat:no-repeat; 不重複background-repeat:repeat-x; 橫向重複background-repeat:repeat-y; 縱向重複

1.4 background-position

#背景定位屬性

background-position:向右移动量 向下移动量

用單字描述:

#描述左右的字:left、 center、right
描述上下的字:top 、center、bottom

右下角:background-position: right bottom;

1.5 背景圖片是否捲動(background-attchment)

scroll:捲動。預設值 fixed:固定。不會隨著滾動條的滾動而滾動local

1.6 background綜和屬性

background屬性和border一樣,是一個綜合屬性:

background:red url(1.jpg) no-repeat 100px 100px fixed;

等价于:
background-color:red;
background-image:url(1.jpg);
background-repeat:no-repeat;
background-position:100px 100px;
background-attachment:fixed;

可以任意省略部分:

background: red;

如果盒子又有背景圖片,又有背景顏色。實際上以顯示圖片為主,富裕的地方,用顏色填滿。

background: blue url(images/wuyifan.jpg) no-repeat 100px 100px;

2.1 背景圖片的基準點(background-origin)

#border-box: 忽略邊框,直接從邊框的起始0,0點開始平鋪padding-box:預設值,忽略padding,直接從padding的起始0,0點開始平鋪content-box:從內容部分開始平鋪,會預留padding的位置。所以說padding會對它造成影響

2.2 多重背景

CSS3-新增背景系列background。背景圖片之間用逗號隔開,可以寫多組,最先渲染的圖片有可能會遮住後面渲染的圖片。

background:  url(images/1.jpg) 0 0 no-repeat,url(images/2.jpg) 121px 0 no-repeat,url(images/3.jpg) 242px 0 no-repeat;

2.3 控制背景圖片的大小(background-size)

background-size:值

##取值:

**長度值**px

百分比:以盒子寬度為參考auto:背景圖片的真實大小

contain完全顯示(當圖片的寬度或是高度在縮放的時候有一個“碰到“了盒子的邊緣,則停止變化)

cover完全鋪滿(將背景圖像等比縮放到完全覆蓋容器,背景圖像有可能超出容器)

當只有一個值,如寬度實現拉伸,高度會默認auto,保持等比例。

當有兩個值,寬度和高度會分別拉伸到對應的值,可能會變形。

以上是CSS3中關於新增背景系列background的詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn