CSS background系列屬性

2021-08-10 01:47:13 字數 3684 閱讀 2578

關於顏色

能夠用英語單詞來表述的顏色都是簡單的顏色

用rgb方法來表示:

光學顯示器每個畫素都是由三原色的發光原件組成的,靠明亮度不同調成不同顏色。

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

如果此項值是255,就說明是純色。

紅色:

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

background-color: rgb(0,255,0);`
藍色:

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

background-color: rgb(255,255,255);
黑色:(光學顯示器每個元件都不發光,所以黑色。)

background-color: rgb(0,0,0);
顏色可以疊加,比如黃色就是紅色和綠色的疊加:

background-color: rgb(255,255,0);
紅、綠、藍三種顏色的不同比例疊加:

background-color: rgb(111,222,123);
十六進製制表示法

紅色

background-color: #ff0000;
所有用#開頭的值都是16進製制

16進製表示法是以兩位兩位為單位,看r, g, b,但是沒有逗號隔開。

ff就是10進製的255,00就是10進製的0,00就是10進製的0,所以等價於rgb(255,0,0);

10進製中的基本數字,一共10個:0、1、2、3、4、5、6、7、8、9

16進製制中的基本數字,一共16個:0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f

16進製制中,13這個數字表示1個16和3個1,即19。這是位權的概念,首位表示多少個16,末尾表示多少個1。

16進製制中的28等於10進製的?216+8=40

16進製制中的2b等於10進製的?216+11=43

16進製制中的af等於10進製的?216+15=175

16進製制中的ff等於10進製的?1516+15=255

background-color: #123456;
等價於:

background-color: rgb(18,52,86);
任何一種16進製表示法,都能夠換算成rgb表示法。也就是說兩個表示法的顏色數量一樣。

16進製制可以簡化為3位,所有#aabbcc的形式都能夠簡化為#abc;

background-color: #ff0000;
等價於

background-color: #f00;
background-color: #112233;
等價於

background-color: #123;
只能上面的方法簡化,下面的兩例無法簡化:

background-color: #222333;
background-color: #123123;
background-image屬性

用於給盒子加上背景:

url()表示**, uniform resources locator統一資源定位符

images/wuyuetian.jpg就是相對路徑。

文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文

背景圖天生是會被平鋪滿的,背景圖的溢位瀏覽器不會報錯

padding的區域有背景圖。

background-repeat屬性:

設定背景圖是否重複以及其重複方式

background-repeat屬性有三種值:

backgound-repeat: no-repeat; 不重複

backgound-repeat: repeat-x; 橫向重複

backgound-repeat: repeat-y; 縱向重複

background-position:背景定位屬性

background-position: 向右移動量, 向下移動量;

定位屬性可以是負數:

background-position: -50px -120px;

css精靈原理

css sprite是一種css影象合併技術,該方法是將小圖示和背景影象合併到一張上,然後利用css背景定位來顯示需要顯示的部分。優點是減少了http請求,比如4張小原本需要4個http請求,但是用了css精靈,小變為一張圖,http請求只有乙個了。可以用fireworks精確控制精靈。

用單詞描述:

background-position: 描述左右的詞 描述上下的詞

即:background-position: right bottom; 表示右下角

左下角:background-position: left bottom;

position後面可以跟方位名詞,它們之間可以沒有上下順序。

position如果只寫乙個值,另外乙個是預設居中的。

position後面也可以跟px值,但必須有順序,x在前面,y在後面,不能顛倒。

通欄banner:

通欄banner做成背景的好處是沒有滾動條

background-attachment屬性:

background-attachment: scroll | fixed

scroll: 背景影象是隨物件內容滾動

fixed: 背景影象固定

示例:html

background綜合屬性:

等價於:

可以任意省略部分:

兩個數字不能分開,其他的順序可以調整。

如果乙個盒子既有背景又有背景顏色,實際以顯示為主,富餘的地方用顏色填充。

css background屬性詳細解析

css可以控制html中各元素的背景顯示,包括背景顏色 背景 背景重複 背景定位和背景關聯5項。在css中,可以通過background屬性對這5項統一控制,也可通過這5項對應的屬性分別控制。下面我們先了解一下css中的這5個屬性。css可以為所有元素設定背景色,從body 一直到em 和a 等內聯...

CSS background背景相關屬性

1 background背景相關 background color 背景顏色 顏色單詞 red blue green.十六進製制值 0 9 a f 三原色值 rgb 0,0,0 0 255 example background color pink background color ccc back...

css background 背景知識詳解

我們知道元素有前景色color,與之對應的還有背景色,通過background我們可以為元素新增實色 background color 和任意多個背景 background image css 背景常見屬性 background color 屬性設定元素的背景顏色。它會會填充元素的內容 內邊距和邊框...