CSS3 背景 background 屬性

2021-10-09 07:34:36 字數 1321 閱讀 6146

background-color:顏色值;    預設的值是  transparent  透明色

background-image:  none  |  url  (url) 引數

作用none

無背景圖(預設的)

url使用絕對或相對位址指定背景影象

background-repe  :  repeat  |  no-repeat  |  repeat-x  |  repeat-y 引數

作用repeat

背景影象在縱向和橫向上平鋪(預設的)

no-repeat

背景影象不平鋪

repeat-x

背景影象在橫向上平鋪

repeat-y

背景影象在縱向平鋪

background-position  :  length  ||  length

background-position  :  position  ||  position 引數

值length

百分數 /由浮點數字和單位識別符號組成的長度值

position

top / center / bottom / left / center / right方位名詞

background-attachment  :  scroll  |  fixed 引數

作用scroll

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

fixed

背景影象固定

語法:

屬性作用

值background-color

背景顏色

預定義的顏色值/十六進製制/rgb**

background-image

背景url(路徑)

background-repeat

是否平鋪

repeat/no-repeat/repeat-x/repreat-y

background-position

背景位置

length/position分別是x和y座標,切記 如果有 精確數值單位,則必須按照先x後y的寫法

background-attachment

背景固定還是滾動

scroll/fixed

背景簡寫

更簡單背景顏色 背景位址 背景平鋪 背景滾動 背景位置;他們沒有順序

背景透明

讓盒子半透明

background:rgba(0,0,0,0.3);後面必須是4個值

css3 動態背景

動態背景 利用多層背景的交替淡入淡出,實現一種背景在不停變換的效果,先看圖。效果圖 demo位址 步驟 1.利用css的radial gradient建立乙個映象漸變的背景。其中的80 20 為漸變中心的x,y位置。具體的radial gradient用法可以參見這裡 2.重複第一步建立4個擁有不同...

CSS3邊框背景

邊框背景 border image 邊框背景主要是用來給元素邊框新增背景影象,本質是用一張來修飾邊框背景,看下圖效果 用左邊來完成右邊的效果 先看一下邊框背景的引數 border image image boeder width 引數可寫1 4個 填充方式 stretch repeat round ...

CSS3背景屬性

background是乙個使用率很高的屬性,也是乙個非常有用的屬性。背景主要包括5個基本屬性 background color 背景顏色 background image 背景 background repeat 背景展示方式 background attachment 背景是固定還是滾動 back...