CSS:background-image

Edcc發表於2020-02-08
CSS

background-image:URL | none

1.預設地，背景影象位於元素的左上角，並在水平和垂直方向上重複

        div{
            width:1000px;
            height:800px;
            background-image: url(1.jpg);
        }/*.預設地，背景影象位於元素的左上角，並在水平和垂直方向上重複*/

2.元素的背景佔據了元素的全部尺寸，包括內邊距和邊框，但不包括外邊框

        div{
        width:300px;
        padding:20px;
        border:1px solid gray;
        margin:20px;
      }/*最終div寬度342是,不包括外邊框mairgin*/

背景圖片重複：background-repeat 是設定背景圖片的重複方式

  • 1.repeat是預設的重複，全部重複
  • 2.no-repeat是不重複
  • 3.repeat-x是水平重複
    4.repeat-y是垂直重複

背景圖片顯示方式-background-attachment：

  1. 設定元素的背景圖片的顯示方式background-attachment：scroll：預設值，背景圖片隨滾動條滾動；
  2. 設定元素的背景圖片的顯示方式background-attachment：fixed：當頁面的其餘部分滾動時，背景圖片不會移動
  3. 所有主流瀏覽器都支援 background-attachment 屬性。
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章