CSS Background-Size 屬性小記

paraller 發布于2019-08-30 13:04 / 563人閱讀

摘要：最后為了實現背景圖片鋪滿瀏覽器窗口的需求，將背景圖裁剪成了的比例，并且用屬性，這樣就可以滿足大部分的應用場景了。

今天在研究用 CSS 實現背景圖片鋪滿瀏覽器窗口的方法，先是在 StackOverflow 上找到一個方法 show full height background image 來實現背景圖填滿瀏覽器高度的需求，但是效果并不好，窗口底部會有一塊空白區域，并且右側有滾動條，在前端群里討論了一番之后，發現用 background-size: cover; 語句即可解決該問題。在 W3Schools 上查看了一下該屬性的說明，在 Background-Size Property Values 這個頁面中，可以查看不同屬性值會有什么樣的表現，整理如下：

屬性值	表現方式
auto	背景圖的原始尺寸
initial	背景圖的原始尺寸
px px	指定的尺寸
*px	指定的寬度，并保持圖片原始高寬比
100% 100%	撐滿填充區域的寬和高
X%	相對于填充區域的寬度比例，并保持圖片原始高寬比
cover	撐滿填充區域的寬度，并保持圖片原始高寬比
contain	撐滿填充區域的高度，并保持圖片原始高寬比

對比上面表格中的幾種屬性，可以發現 100% 和 cover 兩種屬性實現的效果是一樣的，auto 和 initial 實現的效果是一樣的。

最后為了實現背景圖片鋪滿瀏覽器窗口的需求，將背景圖裁剪成了 16:10 的比例，并且用 cover 屬性，這樣就可以滿足大部分的應用場景了。

云服務器 GPU云服務器 css屬性訪問CSS屬性 position屬性，css 獲取CSS屬性值

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115280.html

個人文章分類整理

摘要：春節閑來無事，看看自己在上寫的文章，想不到已經篇了，各方面的都有，那就分類整理一下吧，也方便自己和別人查看。春節閑來無事，看看自己在SegmentFault上寫的文章，想不到已經20篇了，各方面的都有，那就分類整理一下吧，也方便自己和別人查看。 CSS CSS Background-Size 屬性小記 [譯]關于垂直居中 Vertical Align 的探討 [譯]CSS 居中（...

OnlyLing 2019-08-20 14:00 評論0 收藏0
個人文章分類整理

摘要：春節閑來無事，看看自己在上寫的文章，想不到已經篇了，各方面的都有，那就分類整理一下吧，也方便自己和別人查看。春節閑來無事，看看自己在SegmentFault上寫的文章，想不到已經20篇了，各方面的都有，那就分類整理一下吧，也方便自己和別人查看。 CSS CSS Background-Size 屬性小記 [譯]關于垂直居中 Vertical Align 的探討 [譯]CSS 居中（...

v1 2019-07-24 10:34 評論0 收藏0
個人文章分類整理

摘要：春節閑來無事，看看自己在上寫的文章，想不到已經篇了，各方面的都有，那就分類整理一下吧，也方便自己和別人查看。春節閑來無事，看看自己在SegmentFault上寫的文章，想不到已經20篇了，各方面的都有，那就分類整理一下吧，也方便自己和別人查看。 CSS CSS Background-Size 屬性小記 [譯]關于垂直居中 Vertical Align 的探討 [譯]CSS 居中（...

nidaye 2019-08-30 15:52 評論0 收藏0
個人文章分類整理

摘要：春節閑來無事，看看自己在上寫的文章，想不到已經篇了，各方面的都有，那就分類整理一下吧，也方便自己和別人查看。春節閑來無事，看看自己在SegmentFault上寫的文章，想不到已經20篇了，各方面的都有，那就分類整理一下吧，也方便自己和別人查看。 CSS CSS Background-Size 屬性小記 [譯]關于垂直居中 Vertical Align 的探討 [譯]CSS 居中（...

heartFollower 2019-08-01 16:15 評論0 收藏0
前端小記4——高性能mobile web開發

摘要：高性能動畫與端場景需要相比，移動端需要考慮的因素也相對復雜，重點考慮流量功耗與流暢度。而在移動端，我們選擇性能更優瀏覽器原生實現方案動畫。然而，動畫在移動多終端設備場景下，相比會面對更多的性能問題，主要體現在動畫的卡頓與閃爍。1.高性能CSS3動畫與PC端場景需要相比，移動web端需要考慮的因素也相對復雜，重點考慮：流量、功耗與流暢度。在pc端上考慮更多的是流暢度，而mobile web中...

番茄西紅柿 2019-04-23 13:31 評論0 收藏0