html&CSS-插入(背景)圖片的作法

方法一：使用html的img標籤

  1. html-插入圖片路徑：絕對路徑 or 相對路徑

  2. 圖片寬高

    • 直接給予匯入圖片的寬高值，有變形的風險

    • 分別相較於父元素寬高的百分比

    如果使用百分比的width，而沒有給予height，瀏覽器會固定將圖片寬高比例，避免變形的風險

  3. 用css加上邊框樣式

方法二：從css選擇器中定義背景

  1. 先在html中提供一個空間 
    


    ​​​​<body>
​​​​    <div class="box1">box1</div>
​​​​</body>
  2. 開始透過css選擇器，定義該空間的樣式(為了顯示整個空間，所以先趁一個底色)
background-color: antiquewhite;
  1. 定義該空間的寬高(注意：不等同於照片的寬高！)


width:1000px;
height:600px;
  1. 定義要匯入的圖片
background-image: url("https://images.unsplash.com/photo-1553451193-d4d44c036555?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1352&q=80");
  1. 定義匯入圖片的長寬
background-size:500px 333px;
  1. 設定背景圖片不要重複顯示
background-repeat: no-repeat;

  1. 定義圖片會不會跟著瀏覽器跑動
    可以將背景圖視為下層，透過background-attachment屬性的定義，可以定義下層的背景圖是否要跟著上層的瀏覽的畫面連動位移

    • background-attachment:scroll
      不論上層的瀏覽頁面如何捲動，其下方的背景圖會牢牢地跟著上下滑動，所以可視的圖片內容都一樣，不會改變

    • background-attachment:fixed
      下層的背景圖片會固定在某個位置，當上層的瀏覽頁面捲動，所視畫面會隨位置的不同而看到不同的圖片內容。甚至，當下層的背景圖片不夠長，即看不到圖片了

  2. 定義圖片的位置
    background-position 屬性是用來指定背景圖案的位置。
    語法：

    • 兩個字：第一個字為 [top,center,bottom] 中三選一，而第二個字由 [left,center,right] 中三選一。
    • 兩個百分比：第一個百分比為 x軸的百分比，第二個為 y軸的百分比。
    • 兩個數目：第一個數目為 x軸的位置，第二個數目為 y軸的位置。
Select a repo