免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
Board logo

標題: background-size [打印本頁]

作者: rainbow    時間: 2020-7-30 21:28     標題: background-size

本帖最後由 rainbow 於 2020-7-31 07:44 編輯
background-position: center
background-size:auto
保持原图大小


background-position: right bottom
background-size:30%
按背景尺寸百分比放大或缩小,
第一个值是宽度,第二个值为高度。
如果只给出一个值,第二个值自动变化。


background-position: center top
background-size:cover
保持原比例放大填满背景


background-position: center top
background-size:contain
保持原比例放大或压缩到背景尺寸


background-position: center top
background-size:600px
第一个值是宽度,第二个值设置为高度。
  只给出一个值,第二个值按原比例自动变化。

https://www.w3schools.com/cssref/css3_pr_background-size.asp

https://www.runoob.com/cssref/css3-pr-background-size.html



作者: rainbow    時間: 2020-7-31 07:54

本帖最後由 rainbow 於 2020-7-31 11:19 編輯
background-position: center
background-size:100% 100%
不保持原图宽高比例,图片拉伸到填满背景







歡迎光臨 老校友 (http://boanson.orzweb.net/) Powered by Discuz! 7.2