欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

在做登陸頁(yè)面等的首頁(yè)的時(shí)候，經(jīng)常會(huì)遇到需要放一張背景大圖的情況，并且需要圖片按比例縮放，來(lái)適應(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;

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

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

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

z-index:-10;　　

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

zoom: 1;

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

background-repeat: no-repeat;

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

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

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

background-position: center 0;

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

效果如下：

大于1000px時(shí):(截圖太大了，我把圖片縮小了點(diǎn))

小于1000px時(shí)：

原圖：(這個(gè)也太大了縮小了點(diǎn))

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

相關(guān)文章

最新評(píng)論