CSS Background-Size 屬性小記

paraller 發(fā)布于2019-08-30 13:04 / 596人閱讀

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

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

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

對比上面表格中的幾種屬性，可以發(fā)現(xiàn) 100% 和 cover 兩種屬性實(shí)現(xiàn)的效果是一樣的，auto 和 initial 實(shí)現(xiàn)的效果是一樣的。

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115280.html

相關(guān)文章

個(gè)人文章分類整理

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

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

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

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

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

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

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

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

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

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