[問題] CSS 背景圖片固定位置與縮放

看板Web_Design作者 (卡)時間9年前 (2016/06/13 10:44), 9年前編輯推噓2(204)
留言6則, 2人參與, 最新討論串1/1
各位大大好,小弟是新人,剛入門學習基礎前端css。 實作時想要做出下面效果的時候一直卡住,只好請教各位大大m(_ _)m 補充: 我想要的與這遊戲網站的效果一樣 http://ro.gameflier.com/index.asp --------------------------- 還請看示意圖: http://imgur.com/f2GEaYo
我有一張背景圖,假設1000px。並且中間有個紅色方格區域約800px。 1. 當瀏覽器的瀏覽寬度小於800px的時候: 紅色區域的左邊線可以保持對齊瀏覽器的左邊。 縮放的剪裁區域會從紅色區域右方開始縮減。 2. 當瀏覽器寬度 > 800px ,並且不到1000 px時: 背景圖能平均至中,超出紅格區域的大小也平均分配在瀏覽器兩端。 ----------------------------------- 我本來是在中間做一個div,設定寬度800浮動,即可讓內容達到我要的效果, 但是後面背景圖片就沒辦法做到我要的樣子,卡了一天 orz 希望有空的大大能幫我解惑,非常感謝。 -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 203.73.234.49 ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1465785859.A.6D1.html

06/13 10:47, , 1F
https://github.com/karacas/imgLiquid 這個或許是你要的?
06/13 10:47, 1F

06/13 10:47, , 2F
06/13 10:47, 2F
看起來很類似,我研究下怎麼把大大東西轉出來用,感謝。

06/13 11:31, , 3F
昨天剛好有弄到類似的東西…最後是外層再包個滿版div
06/13 11:31, 3F

06/13 11:31, , 4F
,把背景移到外面那層,內層的保持寬度並置中來解決
06/13 11:31, 4F
意思是開一層div放背景圖,裡面一層div保持寬度置中即可!?

06/14 06:11, , 5F
06/14 06:11, 5F

06/14 06:17, , 6F
不確定符不符合你要的XD 外面放背景的也要設最小寬度
06/14 06:17, 6F
天阿 您完美的解決了 XDDD 太感謝啦 ※ 編輯: KanoLoa (203.73.234.49), 06/14/2016 14:19:05
文章代碼(AID): #1NNXu3RH (Web_Design)
文章代碼(AID): #1NNXu3RH (Web_Design)