亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

用CSS設置背景圖像的大小?

用CSS設置背景圖像的大小?是否可以使用CSS設置背景圖像的大小?我想做這樣的事情:background: url('bg.gif') top repeat-y;background-size: 490px;但這樣做似乎是完全錯誤的.
查看完整描述

3 回答

?
搖曳的薔薇

TA貢獻1793條經驗 獲得超6個贊

CSS 2

如果需要使圖像更大,則必須在圖像編輯器中編輯圖像本身。

如果您使用IMG標記,您可以更改大小,但如果您需要圖像作為其他內容的背景(并且它不會像您似乎想要的那樣重復自己),這將不會給您提供想要的結果.

CSS 3釋放力量

這在CSS 3中是有可能的background-size.

所有現代瀏覽器都支持這一點,所以除非您需要支持舊瀏覽器,否則這就是實現它的方法。
受支持的瀏覽器:
Mozilla Firefox 4.0+(Gecko 2.0+)、Microsoft InternetExplorer 9.0+、Opera 10.0+、Safari 4.1+(Webkit 532)和Chrome 3.0+。

.stretch{/* Will stretch to specified width/height */
  background-size: 200px 150px;}.stretch-content{/* Will stretch to width/height of element */
  background-size: 100% 100%;}.resize-width{/* width: 150px, height: auto to retain aspect ratio */
  background-size: 150px Auto;}.resize-height{/* height: 150px, width: auto to retain aspect ratio */
  background-size: Auto 150px;}.resize-fill-and-clip{ 
  /* Resize to fill and retain aspect ratio.
     Will cause clipping if aspect ratio of box is different from image. */ 
  background-size: cover;}.resize-best-fit{/* Resize to best fit and retain aspect ratio.
   Will cause gap if aspect ratio of box is different from image. */ 
  background-size: contain;}

特別是,我喜歡covercontain給我們新的控制力的價值觀,這是我們以前沒有過的。

您也可以使用background-size: round與重復相結合有意義的:

.resize-best-fit-in-repeat{/* Resize to best fit in a whole number of times in x-direction */ 
  background-size: round auto; /* Height: auto is to keep aspect ratio */
  background-repeat: repeat;}

這將調整圖像的寬度,使其適合在背景定位區域的全部次數。


附加說明
如果您需要的大小是靜態像素大小,那么物理地調整實際圖像的大小仍然是明智的。這不僅是為了提高調整大小的質量(考慮到您的圖像軟件比瀏覽器做得更好),而且如果原始圖像大于顯示內容,則可以節省帶寬。


查看完整回答
反對 回復 2019-07-08
?
ITMISS

TA貢獻1871條經驗 獲得超8個贊

只有CSS 3支持,

background-size: 200px 50px;

但是我會編輯圖像本身,這樣用戶就需要更少的加載,并且它看起來可能比沒有抗混疊的縮小圖像更好。


查看完整回答
反對 回復 2019-07-08
?
蕭十郎

TA貢獻1815條經驗 獲得超13個贊

如果您的用戶只使用Opera 9.5+、Safari 3+、InternetExplorer 9+和Firefox 3.6+,那么答案是肯定的。否則不行。

這個背景尺寸屬性是CSS 3的一部分,但它不能在大多數瀏覽器上工作。

為了您的目的,只需使實際的圖像更大。


查看完整回答
反對 回復 2019-07-08
  • 3 回答
  • 0 關注
  • 785 瀏覽
慕課專欄
更多

添加回答

了解更多

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號