首頁 > web前端 > css教學 > CSS頁面佈局常用知識總結(頁面背景)

CSS頁面佈局常用知識總結(頁面背景)

yulia
發布: 2018-09-20 16:04:11
原創
2741 人瀏覽過

CSS中的知識非常多,我們不可能全都記得住。閒暇時整理了一些CSS頁面佈局的常用知識,這篇文章就和大家分享一下CSS頁面背景的常用知識。需要的朋友可以參考一下,希望可以幫助你。

1、設定背景色

CSS提供background-color屬性設定頁面的背景色。

實例:background-color: red;

2、設定背景圖片

頁面新增圖片 

語法: < img src=”pic.jpg”/>

頁面新增背景圖片 

CSS提供background-image屬性直接為頁面新增一個背景圖片。

語法:background-image: url(pic.jpg);

#(1)背景圖片的平鋪

CSS提供background-repeat屬性設定背景圖片的平鋪方式。有四種屬性repeat(背景圖片在橫向和縱向上平鋪)、no-repeat(背景圖片不平鋪)、repeat-x(背景圖片在橫向上平鋪)、repeat-y(背景圖片在縱向上平鋪)。

語法:background-repeat: repeatmode;

(2)背景圖片的位置

CSS提供background-position屬性設定背景圖片與頁面的相對位置。

語法:background-position: position;

其中position可以使用長度單位、百分比、關鍵字來決定。

使用長度單位:background-position: 10px 20px;(背景圖片沿x軸平移10px,沿y軸平移20px)

使用百分比:background-position: 30% 30%;

使用關鍵字:background-position: right bottom; 屬性值橫向有left、center、right,縱向有top、center、bottom。

(3)固定和捲動背景圖片

CSS提供background-attachment屬性。屬性值scroll表示背景圖片隨物件內容滾動;fixed表示背景圖片固定。

實例:background-attachment: fixed;

3、頁面背景屬性

屬性background-image、background-position、background-repeat、 background-attachment四個屬性可以使用background進行縮寫。

實例:background:url(pic.jpg) 10px 20px repeat fixed;

以上是CSS頁面佈局常用知識總結(頁面背景)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板