首頁 > web前端 > css教學 > CSS如何設定背景屬性(詳解)

CSS如何設定背景屬性(詳解)

青灯夜游
發布: 2018-10-12 18:01:01
轉載
3124 人瀏覽過

本文給大家詳解CSS如何設定背景屬性,有一定的參考價值,有需要的朋友可以參考一下,希望對你們有幫助。

背景相關屬性主要有:

  • background-color  背景顏色 

  • background-image 背景圖片

  • background-repeat 是否平鋪repeat (預設平鋪) | repeat-x(水平平鋪) | repeat-y (垂直平鋪)| no-repeat (不平鋪)

  • background-position 背景位置  length(百分數)|position(top center button left right) 一般兩個一起用,如果至指定一個方向另一個方向預設為center,兩種方法也可以混搭。方位名詞沒有順序區分,而使用百分數時時有順序的,先是水平後是垂直

  • #background-attachment 背景固定還是滾動scroll | fixed

  • #background:背景顏色 背景圖片 是否平鋪 背景固定或滾動 背景位置

  #p1 {
            width: 300px;
            height: 300px;
            background-color: blue;            /*默认是transparent透明的*/
            /* background-color: transparent; */
            background-image: url(Images/2.jpg);
            background-repeat: no-repeat;            /*不平铺,默认是水平垂直平铺*/
            /* background-repeat: repeat-y; */
            /* background-repeat:  repeat-x; */
            /* background-position: right bottom; */
            background-position: 10% center;
            background-attachment: fixed;
        }
登入後複製

想要背景半透明在指定顏色時使用rgba( r, g b ,a) , a就是指明透明度

p {
            width: 100%;
            height: 300px;
            background-color: rgba(0, 0, 0, 0.6);
        }
登入後複製

當要使用多張背景圖片時使用background來指定多個url,每組之間用','逗號隔開,若圖片有重疊,則前一張覆蓋後一張圖片,但是整體背景顏色必須在最後一個url後指定。

p {
            width: 100%;
            height: 300px;
            background: url(Images/2.jpg) no-repeat left top, url(Images/3.jpg) no-repeat right bottom blue;
        }
登入後複製

總結:以上就是這篇文章的全部內容,希望能對大家的學習有所幫助。更多相關教學請訪問 CSS基礎影片教學 CSS3影片教學

以上是CSS如何設定背景屬性(詳解)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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