亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS實現(xiàn)背景圖片屏幕自適應(yīng)的實現(xiàn)

  發(fā)布時間：2020-12-07 17:03:31   作者：湯利利   我要評論
這篇文章主要介紹了CSS實現(xiàn)背景圖片屏幕自適應(yīng)的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

在做登陸頁面等的首頁的時候，經(jīng)常會遇到需要放一張背景大圖的情況，并且需要圖片按比例縮放，來適應(yīng)不同屏幕的大小。

html代碼如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/login.css"><!-- 我的css代碼路徑 -->

    <title>。。。</title>
</head>

<body>
    <div class="bgimg">
</body>

</html>

css代碼如下：

.bgimg{
    position:fixed;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
    min-width: 1000px;
    z-index:-10;
    zoom: 1;
    background-color: #fff;
    background: url(../img/bg_login.jpg) no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-position: center 0;
}

分析一下css代碼中的作用：

position:fixed;
top: 0;
left: 0;

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

width:100%;
height:100%;
min-width: 1000px;

上面前兩句是讓整個div跟屏幕大小一樣，從而達(dá)到全屏效果。而min-width是為了實現(xiàn)讓屏幕寬度在1000px以內(nèi)時，div的大小保持不變，也就是圖片不縮放。

z-index:-10;　　

這個的目的是讓整個div在HTML頁面中各個層級的下方，正常情況下，默認(rèn)創(chuàng)建的層級z-index的值是0，所以如果我們這里寫成-1也可以實現(xiàn)，不過這里寫-10是確保整個div在最下面，因為如果頁面中層級太多了，有的時候用-1不一定在最下面，但如果寫成-100這樣大數(shù)字的也沒有什么意義。用-10 以此能達(dá)到看上去像背景圖片，其實是一個最普通的div，只是層級關(guān)系變了，才讓人看上去看是背景圖片。

zoom: 1;

zoom是CSS hack中專對IE6起作用的部分。IE6瀏覽器會執(zhí)行zoom:1表示對象的縮放比例。兼容IE6、IE7、IE8瀏覽器，經(jīng)常會遇到一些問題，可以使用zoom:1來解決，zoom有如下作用：1.觸發(fā)IE瀏覽器的haslayout； 2.解決ie下的浮動，margin重疊等一些問題。

background-repeat: no-repeat;

圖片平鋪，不重復(fù)

background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;

上面三句是一個意思，就是讓圖片隨屏幕大小同步縮放，但是有部分可能會被裁切，不過不至于會露白，下面兩句是為chrome和opera瀏覽器作兼容。

background-position: center 0;

上面這句的意思就是圖片的位置，居中，靠左對齊

效果如下：

大于1000px時:(截圖太大了，我把圖片縮小了點)

小于1000px時：

原圖：(這個也太大了縮小了點)

到此這篇關(guān)于CSS實現(xiàn)背景圖片屏幕自適應(yīng)的實現(xiàn)的文章就介紹到這了,更多相關(guān)CSS背景屏幕自適應(yīng)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論