iT邦幫忙

2025 iThome 鐵人賽

DAY 26
0
Modern Web

從0到有做出一個商家網頁系列 第 26

Day26:繼續學習新的CSS語法

  • 分享至 

  • xImage
  •  

我們接著昨天的進度繼續做

1.background屬性的寫法
background屬性的值一次設定與背景有關的8種CSS屬性。

background的寫法:
background:url(檔案路徑) no-repeat right center/cover;

url(檔案路徑):background-image

no-repeat:background-repeat

right center:background-position

cover:background-size
在設定background-size時,請記得一定要在background-position的值後面加上/(斜線)。

以上四個屬性,加上background-color、background-attachment、background-clip、
background-origin,總共可以設定8種屬性。

background-size的關鍵字:
設定background-size(背景圖大小)的值大小時,常常會使用「cover」或「contain」這些關鍵字,請先了解這兩者的差異。

cover:
(一)在維持長寬比的狀態下,盡可能放大指定元素,覆蓋整個背景

(二)裁切出超出範圍的部分

contain:
(一)在維持長寬比的狀態下,縮放顯示整個影像

2.置入顯示捲動的「Scroll」符號
(一)設定元素配置方法的屬性:
postion:~;:在值輸入static、relative、absolute、fixed、stickly其中一個。

(二)設定位置的屬性
left:~;right:~;top:~;bottom:~;
:只有設定位置的元素(以position屬性設定除了static以外的值的元素)有效果,在值輸入設定位置,含有單位的數值。

今天先做到這裡明天再繼續!


上一篇
Day25:繼續學習編寫網頁表單的HTML並學習新的CSS語法
下一篇
Day27:CSS動畫效果
系列文
從0到有做出一個商家網頁30
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言