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

Posted on March 27, 2019 本文总阅读量次

html-插入圖片路徑：絕對路徑 or 相對路徑
圖片寬高
- 直接給予匯入圖片的寬高值，有變形的風險
- 分別相較於父元素寬高的百分比
  
  ==如果使用百分比的width，而沒有給予height，瀏覽器會固定將圖片寬高比例，避免變形的風險==
用css加上邊框樣式

先在html中提供一個空間

1
2
3

<body>
    <div class="box1">box1</div>
</body>

定義要匯入的圖片

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");

定義圖片會不會跟著瀏覽器跑動
可以將背景圖視為下層，透過background-attachment屬性的定義，可以定義下層的背景圖是否要跟著上層的瀏覽的畫面連動位移
- background-attachment:scroll
  不論上層的瀏覽頁面如何捲動，其下方的背景圖會牢牢地跟著上下滑動，所以可視的圖片內容都一樣，不會改變
- background-attachment:fixed
  下層的背景圖片會固定在某個位置，當上層的瀏覽頁面捲動，所視畫面會隨位置的不同而看到不同的圖片內容。甚至，當下層的背景圖片不夠長，即看不到圖片了
定義圖片的位置
background-position 屬性是用來指定背景圖案的位置。
語法：
- 兩個字：第一個字為 [top,center,bottom] 中三選一，而第二個字由 [left,center,right] 中三選一。
- 兩個百分比：第一個百分比為 x軸的百分比，第二個為 y軸的百分比。
- 兩個數目：第一個數目為 x軸的位置，第二個數目為 y軸的位置。