iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 15
1

正文開始:
影像使用上背景圖片的使用為非常常見的案例,而背景圖片的附加方法如下:

#ID{background-image: url("URL");

NoRepeat
這樣就可以將圖片加入到我們的容器當中了,而若是圖片的大小與容器不符我們可以選擇修改圖片或是重複圖片,在此介紹圖片重複的使用方式:

#ID{background-repeat: repeat/repeat-x/repeat-y/no-repeat;}

repeat:圖片會在橫向和縱向不斷重複下去,這也是默認值
repeat-x:圖片僅會在橫向重複
repeat-y:圖片僅會在縱向重複
no-repeat:圖片不會重複
repeat
我們還可以決定背景圖片要不要跟著瀏覽器一起移動,代碼為:

#ID{ background-attachment: fixed/scroll;}

當值為fixed時圖片不會跟著瀏覽器一起移動,而scroll則是會隨著使用著捲動頁面而移動

背景圖片呼叫完後我們可以決定它的擺放位置,使用的是background-position

#ID{background-position: left/right/center top/bottom/center}

這屬性會在當我們不打算讓背景圖片重複的時後加入考量當中

跟很多屬性一樣,背景也有著速記的方式,能夠一行解決的事情幹嘛要兩行呢,方法如下

#ID{background: color / image / repeat / attachment / position ;}

以上五種屬性皆為可選屬性,有沒有填入並不影響使用

CSS也提供了影像漸層來使用,這方面就不細講了,有興趣者可以自行搜尋,今天影像就講到這以告一段落,預計明天會開始介紹基礎的JS技巧,大家明天見啦


上一篇
day14 - 版面元素
下一篇
day16 - 再一次的HelloWorld
系列文
從零開始的基礎網站開發29
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言