css背景樣式css背景樣式

2021-05-01 01:42:01 字數 1932 閱讀 1325

css背景樣式

css背景樣式

序號中文說明

標記語法

1背景顏色2背景

3背景重複

4背景固定

5背景定位

6背影樣式

1.背景顏色:background-color

語法:

說明: 引數取值和顏色屬性一樣

注意: 在 html當中,要為某個物件加上背景色只有一種辦法,那就是先做乙個**,在**中設定完背景色,再把物件放進單元格。這樣做比較麻煩,不但**較多,還 要為**的大小和定位傷些腦筋。現在用css就可以輕鬆地直接搞定了,而且物件的範圍很廣,可以是一段文字,也可以只是乙個單詞或乙個字母。

例子:給部分文字加背景顏色

給部分文字加背景顏色

**背影顏色:style="background-color:red"

2.背景:background-image

語法:

說明: url就是背景的存放路徑。如果用「none」來代替背景的存放路徑,將什麼也不顯示。

例子: 給部分文字加背景 .imgbgstyle

3.背景重複:background-repeat

語法:

作用: 背景重複控制的是背景平鋪與否,也就是說,結合背景定位的控制可以在網頁上的某處單獨顯示一幅背景

說明: 引數取值範圍:

·inherit 繼承

·no-repeat 不重複平鋪背景

·repeat

·repeat-x 使只在水平方向上平鋪

·repeat-y 使只在垂直方向上平鋪

注意: 如果不指定背景重複屬性,瀏覽器預設的是背景向水平、垂直兩個方向上平鋪。

4.背景固定:background-attachment

語法:

說明: 引數取值範圍

·fixed:網頁滾動時,背景相對於瀏覽器的視窗而言,固定不動

·scroll:網頁滾動時,背景相對於瀏覽器的視窗而言,一起滾動

注意: 背景固定控制背景是否隨網頁的滾動而滾動。如果不設定背景固定屬性,瀏覽器預設背景隨網頁的滾動而滾動。為了避免過於花哨的背景在滾動時傷害瀏覽者的視力,所以可以解除背景和文字內容的**,該為和瀏覽器視窗**。

例子: 使背景圖案不隨文字「滾動」的css

body

5.背景定位:background-position

語法:

作用: 背景定位用於控制背景在網頁中顯示的位置。

說明: 引數取值範圍

·帶長度單位的數字引數

·top:相對前景物件頂對齊

·bottom:相對前景物件底對齊

·left:相對前景物件左對齊

·right:相對前景物件右對齊

·center:相對前景物件中心對齊

·比例關係

關鍵字解釋如下:

top left = left top = 0% 0%

top = top center = center top = 50% 0%

right top = top right = 100% 0%

left = left center = center left = 0% 50%

center = center center = 50% 50%

right = right center = center right = 100% 50%

bottom left = left bottom = 0% 100%

bottom = bottom center = center bottom = 50% 100%

bottom right = right bottom = 100% 100%

注意: 引數中的center如果用於另外乙個引數的前面,表示水平居中;如果用於另外乙個引數的後面,表示垂直居中。

CSS 背景樣式

目錄 背景色 background color 背景影象 background image 背景重複 平鋪 background repeat 背景定位 background position 關鍵字百分數值 長度值 背景關聯 background attachment div注 定義沒有先後之分。...

css 背景樣式

樣式屬性 樣式名描述 background color 設定背景顏色 background image 設定背景 background repeat 設定背景重複 background position 設定背景影象定位 background attachment 設定背景影象滾動 backgrou...

css背景樣式

css背景background的樣式主要有以下幾種 1 背景的顏色 background color 背景顏色可以寫成十六進製制的以 開頭,還可以是rgb格式rgb 255.0.0 還可以直接寫成顏色的英文格式。格式一 background color fff 格式二 background colo...