国产激情久久久久影院小草_国产91高跟丝袜_99精品视频99_三级真人片在线观看

CSS編程學(xué)習(xí)制作背景教程

時(shí)間:2024-09-05 04:41:55 CSS 我要投稿
  • 相關(guān)推薦

CSS編程學(xué)習(xí)制作背景教程

  在CSS里面,每個(gè)元素盒子都可以想象成由兩個(gè)圖層組成。

CSS編程學(xué)習(xí)制作背景教程

  前景層:內(nèi)容(如文本或圖片)和邊框。

  背景層:用實(shí)色填充(使用 background-color 屬性),也可以包含任意多個(gè)背景圖片(使用 background-image 屬性),背景圖片疊加在背景顏色之上。

  在 CSS3 被瀏覽器實(shí)現(xiàn)之前,只能在背景顏色上添加一張圖片。而現(xiàn)在,我們可以為背景圖層添加多張圖片(以及 CSS3 漸變)。

  CSS背景屬性:

  background-color

  background-image

  background-repeat

  background-position

  background-size

  background-attachment

  background(簡寫屬性)

  background-clip、background-origin、background-break(目前尚未得到廣泛支持)

  背景顏色

  格式:background-color: 顏色值;

  示例:background-color: #caebff;

  背景圖片

  格式:background-image:url(圖片路徑/圖片文件名);

  示例:background-image:url(images/blue_circle.png);

  默認(rèn)情況下背景圖片會(huì) 以元素左上角為起點(diǎn),沿水平和垂直方向重復(fù)出現(xiàn),最終填滿整個(gè)背景區(qū)域。

  背景重復(fù)

  格式:background-repeat: repeat | repeat-x | repeat-y | no-repeat;

  示例:background-repeat:repeat-x;

  說明:

  repeat 默認(rèn)值,水平和垂直方向都重復(fù),直至填滿元素的背景區(qū)域?yàn)橹埂?/p>

  repeat-x 水平方向重復(fù)。

  repeat-y 垂直方向重復(fù)。

  no-repeat 任何方向上都不重復(fù)(只讓背景圖片顯示一次)。

  背景位置

  用于控制背景位置的 background-position 屬性,是所有背景屬性中最復(fù)雜的。

  該屬性有5個(gè)關(guān)鍵字值,分別是 top、left、bottom、right 和 center,這些關(guān)鍵字中的任意兩個(gè)組合起來都可以作為該屬性的值。

  background-position 屬性同時(shí)設(shè)定元素和圖片的原點(diǎn)。原點(diǎn)決定了元素和圖片中某一點(diǎn)的水平和垂直坐標(biāo)。默認(rèn)情況下,background-position的原點(diǎn)位于左上角。

  第一種情況,使用關(guān)鍵字來設(shè)定位置。background-position屬性的默認(rèn)值 top、left 控制著水平和垂直方向重復(fù)的起點(diǎn)。如修改 起點(diǎn)位置:p#center {background-position:center center;}(簡化寫法:background-position:center,設(shè)定一個(gè)關(guān)鍵值,則另一個(gè)也會(huì)取相同的值。),背景圖片就會(huì)以段落的中心點(diǎn)為起點(diǎn)。

  第二種情況,使用百分比來設(shè)定位置。

  示例:background-position:50% 50%;,再把 background-repeat 設(shè)定為 no-repeat,就能實(shí)現(xiàn)了圖片在背景區(qū)域內(nèi)居中的效果。第一個(gè)值表示水平位置,第二個(gè)值表示垂直位置。要是只設(shè)定一個(gè)值,則將其用來設(shè)定水平位置,而垂直位置會(huì)被設(shè)為 center。

  第三種情況,使用絕對(duì)或相對(duì)單位的數(shù)值。要是使用像素單位來設(shè)定位置,那么圖片的左上角會(huì)被放在距離元素左上角指定位置的地方。另外,還可以使用負(fù)值,這樣可以把圖片的左上角定位到元素外部,從而在元素中只能看到部分圖片。當(dāng)然也可以給圖片設(shè)定足夠大的正值,把圖片的右下角推到元素外部實(shí)現(xiàn)同樣的效果。

  背景尺寸

  background-size 是 CSS3 規(guī)定的屬性,用來控制背景圖片的尺寸。

  可設(shè)定的值和含義如下:

  50%:縮放圖片,使其填充背景區(qū)的一半。

  100px 50px:把圖片調(diào)整到 100 像素寬,50 像素高。

  cover:拉大圖片,使其完全填滿背景區(qū);保持寬高比。

  contain:縮放圖片,使其恰好適合背景區(qū);保持寬高比。

  注意:把很小的圖片拉大會(huì)導(dǎo)致圖片質(zhì)量失真。

  背景粘附

  background-attachment屬性控制滾動(dòng)元素內(nèi)的背景圖片是否隨元素滾動(dòng)而滾動(dòng)。

  屬性值有:

  scroll。背景圖片隨元素移動(dòng)。

  fixed。背景圖片不會(huì)隨元素滾動(dòng)而移動(dòng)。

  提示:background-attachment:fixed 最常用于給 body 元素中心位置添加淡色水印,讓水印不隨頁面滾動(dòng)而移動(dòng)。

  簡寫背景屬性

  示例:body {background:url(images/watermark.png) center #fff no-repeat contain fixed;}

  說明:聲明中少寫了哪個(gè)屬性的值(比如沒寫 no-repeat),就會(huì)使用相應(yīng)屬性的默認(rèn)值( repeat)。

  多背景圖片

  CSS3 可以給元素背景添加多個(gè)背景圖片。

  示例:

  CSS Code復(fù)制內(nèi)容到剪貼板 p{ background: url(images/turq_spiral.png)30px-10pxno-repeat, url(images/pink_spiral.png)145px0pxno-repeat, url(images/gray_spiral.png)140px-30pxno-repeat,#ffbd75; }

  背景漸變

  漸變,就是在一定長度內(nèi)兩種或多種顏色之間自然的過渡。

  提示:漸變是 CSS 幫我們生成的背景圖片。添加漸變可以使用 background-image 屬性,也可以使用簡寫 background 屬性。

  漸變分兩種:

  線性漸變。從元素的一端延伸到另一端。

  放射性漸變。從元素內(nèi)一點(diǎn)向四周發(fā)散。

  廠商前綴

  為鼓勵(lì)瀏覽器廠商盡早采用 W3C 的 CSS3 推薦標(biāo)準(zhǔn),于是就產(chǎn)生了 VSP(Vendor Specific Prefixes,廠商前綴)的概念。

  示例:

  transform 屬性的標(biāo)準(zhǔn)語法是這樣的:

  transform: skewX(-45deg);

  由于這個(gè)屬性還沒有完全定案,為保證在大多數(shù)瀏覽器以及它們的實(shí)驗(yàn)性實(shí)現(xiàn)中能夠使用這個(gè)屬性,應(yīng)該針對(duì)想要支持的瀏覽器為該屬性添加 VSP。每個(gè)瀏覽器只使用各自能理解的屬性聲明:

  CSS Code復(fù)制內(nèi)容到剪貼板 -moz-transform:skewX(-45deg);/*Firefox*/ -webkit-transform:skewX(-45deg);/*Chrome及Safari*/ -ms-transform:skewX(-45deg);/*微軟InternetExplorer*/ -o-transform:skewX(-45deg);/*Opera*/ transform:skewX(-45deg);/*最后是W3C標(biāo)準(zhǔn)屬性*/

  以下 CSS3 屬性必須加 VPS:

  CSS Code復(fù)制內(nèi)容到剪貼板 border-imagetranslate linear-gradienttransition radial-gradientbackground* transformbackground-image* transform-origin >*針對(duì)背景圖片或漸變

【CSS編程學(xué)習(xí)制作背景教程】相關(guān)文章:

CSS基礎(chǔ)教程之背景圖片07-31

css屬性定位教程07-23

CSS入門教程01-25

CSS閉合浮動(dòng)元素教程06-26

CSS選擇器教程06-05

CSS教程之盒模型10-17

關(guān)于CSS教程:復(fù)合型條狀圖表01-25

關(guān)于網(wǎng)站制作css書寫規(guī)范02-26

PPT制作教程10-13

CSS-層疊樣式表基礎(chǔ)教程08-10