背景自適應

2021-08-27 11:16:59 字數 1480 閱讀 7963

一張清晰漂亮的背景能給網頁加分不少,設計師也經常會給頁面的背景使用大圖,我們既不想因為不同解析度變形,也不希望當在大屏的情況下,背景有一塊露白,簡而言之,就是實現能自適應螢幕大小又不會變形的背景大圖,而且背景不會隨著滾動條滾動而滾動。

用css實現真的很簡單很簡單,下面我們來看一下第一種方法具體的**:

你看,**就是這麼簡單。

下面,我們來分析一下,css中每句**的作用是什麼:

position

:fixed;

top: 0;

left

: 0;

這三句是讓整個div固定在螢幕的最上方和最左方

width

:100%;

height

:100%;

min-width

: 1000px;

上面前兩句是讓整個div跟螢幕實現一模一樣的大小,從而達到全屏效果,而min-width是為了實現讓螢幕寬度在1000px以內時,div的大小保持不變,也就是說在這種情況下,縮放螢幕寬度時,不要縮放(只有在1000px以內才有效)。

z-index

:-10;

這個的目的是讓整個div在html頁面中各個層級的下方,正常情況下,第乙個建立的層級z-index的值是0,所以如果我們這裡寫成-1也可以實現,不過這裡寫-10是確保整個div在最下面,因為如果頁面中層級太多了,有的時候用-1不一定在最下面,但如果寫成-100這樣大數字的也沒有什麼意義。用index:-10 以此能達到看上去像背景,其實是乙個最普通的div,只是層級關係變了,才讓人看上去看是背景。

zoom: 1;
這個的目的是為了相容ie瀏覽器

background-repeat: no-repeat;
上面三句是乙個意思,就是讓隨螢幕大小同步縮放,但是有部分可能會被裁切,不過不至於會露白,下面兩句是為chrome和opera瀏覽器作相容。

background-position: center 0;
上面這句的意思就是的位置,居中,靠左對齊

Unity相機自適應背景

在 unity 3d 中可以把攝像機設定為正交。正交攝像機與 unity 3d 中普通攝像機相比沒有透視效果 近大遠小 所以正交相機一般可以用於 2d 遊戲開發或者是 3d 遊戲的 ui 開發。在 2d 遊戲開發中,有時會遇到根據螢幕的解析度對遊戲的背景進行自適應縮放的需求,這就需要對正交攝像機的尺...

UGUI 字型背景尺寸自適應

在ugui裡,我們有時需要做類似對話方塊這種東西,還需要對話方塊可以隨著裡面文字多少,行數的變化,進行拉伸變化。我第一時間想到的解決方案是自己計算對話的char長度,然後動態的去修改背景圖的尺寸,這種方法乍看之下沒有任何問題,但是在實際應用中,發現有致命的缺陷。那就是當對話的文字可能是多語言的時候,...

網頁背景自適應大小

前幾天在做乙個網頁想把乙個解析度比較大的乙個背景自動適應視窗大小,但是網上搜了下大都是使用 js控制網頁背景隨視窗大小自動適應的,而且大都效果不理想,最後終於找到了乙個簡單的辦法 本來是想看看css能不能實現背景自動適應視窗的的,但是可惜的是在css2中,背景圖的大小在樣式中 是不可控的,比如要想使...