css背景雪碧圖等

時間 2019-11-10

標籤 css 背景雪碧欄目 CSS 简体版

原文原文鏈接

^{一、背景圖雪碧圖技術}

要設置背景，是要設置在某個盒子上css

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魔降風雲變</title>
    <style>
        .bg{
            width: 1200px;
            height: 1200px;
            border: 1px solid #0c0c0c;
            background-image: url("3.png");
            color: green;
            font-weight: 700;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="bg">
        魔降風雲變
    </div>
</body>
</html>

背景圖，圖片在文字的下面。「魔降風雲變」這個元素做爲 <div class="bg">魔降風雲變</div>這個div的第一個元素html

拿一張圖片，平鋪到設置了背景圖的盒子上就像是天花板和地板磚，若是圖片是有對稱的，那麼會很好看。背景圖比盒子的長和寬都小，實現橫向平鋪和縱向平鋪。橫向平鋪就是水平平鋪，縱向平鋪就是垂直平鋪web

也可讓它不平鋪，默認狀況下它是background-repeat: repeat;，平鋪。canvas

background-repeat: repeat-x; //只顯示水平方向的平鋪

 background-repeat: repeat-y; //只在垂直方向上平鋪

background-repeat: no-repeat;  //沒有平鋪 ，沒有重複

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魔降風雲變</title>
    <style>
        .bg{
            width: 500px;
            height: 420px;
            border: 1px solid #0c0c0c;
            background-image: url("3.png");
            color: green;
            background-repeat: no-repeat;
            font-weight: 700;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="bg">
        魔降風雲變
    </div>
</body>
</html>

View Code

調整盒子寬高和圖片同樣：就是這個樣子，文字在盒子的左上角開始，也是圖片的左上角api

            background-image: url("3.png");
            background-repeat: no-repeat;
            background-position: 0 0;

默認是0 0，第一個是水平方向上的座標，第二個是垂直方向上的座標，以盒子左上角做爲00點。第一個是左右方向，向左爲正，向右爲負瀏覽器

背景圖往右走20px，服務器

        background-image: url("3.png");
            background-repeat: no-repeat;
            background-position: 20px 0;

往下走50pxapp

            background-image: url("3.png");
            background-repeat: no-repeat;
           background-position: 20px 50px;

往左走200px,文字不會隨着背景圖的移動而移動ide

摳圖，只需圖片中的某一個部分：好比這裏只要眼睛的圖片：svg

測量一下她的眼睛寬170px，高70px

那麼外部的盒子讓它就是這個尺寸

而後調整圖片的位置：

將調試出來的數字放到css樣式中

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魔降風雲變</title>
    <style>
        .bg{
            width: 170px;
            height: 70px;
            border: 1px solid #0c0c0c;
            background-image: url("3.png");
            background-repeat: no-repeat;
            background-position: -130px  -100px;
             color: green;
            font-weight: 700;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="bg">
        <!--魔降風雲變-->
    </div>
</body>
</html>

View Code

            background-image: url("3.png");
            background-repeat: no-repeat;
            background-position: -130px  -100px;

background-position在css樣式中也是一種技術，這種技術叫作精靈圖技術，也叫雪碧圖技術

看下圖，有個左箭頭右箭頭，鼠標指針指的地方是透明的左箭頭右箭頭，四個小圖片

好比淘寶的下面這些地方：

打開這個圖片連接：這是一張圖片裏面不少小圖，雪碧圖技術就用於這種小圖上。一個img標籤至關於用戶要向服務器發送一次請求，這對於服務器來講是施加壓力的。所以能夠將不少小圖讓美工貼到一張大圖上，而後用這個background-position這個技術經過位置將每一個小圖摳出來。這樣只須要請求一次這張大圖，只請求了一次，減小了http請求的次數；可是也有壞處，好比又有新的小圖了，美工又要貼，貼了再改，再去寫；可是對比於服務器壓力來講，減小服務器壓力更重要

好比有些導航等等式漸進式的：顏色由淡變深。咱們能夠用css樣式控制它的顏色。之前用的多的是美工作的，上面時淡淡的顏色，下面是深深的顏色

好比1px寬的圖片，漸進式的，設置成背景圖橫向平鋪。如今用的不少的是字體圖標

二、雪碧圖使用案例，輪播圖

那麼用這個

作小米的這個效果：

如今是要有張圖片在這個地方顯示：

這張圖2452*920，正好是在頁面的位置將它寬高縮小了一倍

代碼以下：

效果以下：

如今要在上圖兩邊弄出下面的這種箭頭：鼠標懸浮時會換圖

它是模擬的a標籤，而且鼠標放在上面變成一個小手；

下面的屬性能夠用一個屬性代替實現雪碧圖：background

在容器類下添加span標籤，設置四個圖片的共有屬性

背景圖跑到下面的位置了：

如今須要調整這個標籤的位置到對應地方，那麼我須要作子絕父相，span絕對定位，父相對定位，也能夠給父的父swiper相對定位。top，left爲0

變成這個樣子了,圖片的層級要高於下面的了，

給下面的盒子一個z-index:80;

正常顯示了：

定位，一個在左一個在右：

效果以下：

去掉和添加

效果在下面兩個位置

給它一個top:0;

結果以下：

接下來讓左邊那個到陰影的右邊部分：距左陰影寬度個距離

如今讓左邊的這個距頂圖片一半的高度個距離：

不夠不是垂直居中的 top：50% ; 也是這個樣子

我應該再給它往上調它自己的高度的一半距離：

這樣就居中了。絕對定位的盒子不佔位置，也能夠用margin進行微調位置，不影響佈局

對於兩者一致的樣式就放到父裏面；

這樣就實現了兩個標籤：

懸浮變成深色的可使用提供給的圖片，雪碧圖技術修改背景圖位置獲取：

這樣就實現了輪播圖的按鈕：

background-position不只是調整背景圖位置，也是一種技術，雪碧圖。雪碧圖就是一張大圖多張小圖，用這個屬性從大圖中將對應的小圖切出來

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魔降風雲變</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            color: #fff;
        }
        ul{
            list-style: none;
        }
        #box{
            width: 1226px;
            height: 100px;
            margin: 0 auto;
            background-color: #000;
        }
        #box ul{
            /*overflow: hidden;*/
            padding: 12px 0 0 30px;
            /*width: 500px;*/
            height: 88px;
            /*background-color: red;*/
        }
        #box ul li{
            float: left;
            width: 60px;
            height: 58px;
            /*padding-top: 30px;*/
        }
        #box ul li.active{
            width: 100px;
            height: 88px;
            background-color: green;
            position: relative;
        }
        #box ul li.active .box{
            position: absolute;
            width: 234px;
            height: 600px;
            background-color: rgba(0,0,0,.5);
            top: 88px;
            left: -30px;
            z-index: 80;
        }
        .clearfix:after{
            content: '';
            clear: both;
            display: block;
        }
        .swiper{
            width: 100%;
            height: 460px;
        }
        .container{
            width: 1226px;
            margin: 0 auto;
            position: relative;
        }
        .swiper span{
            display: inline-block; /*span標籤沒有大小，強制轉成行內塊*/
            width: 41px;
            height: 69px;
            background: url("icon-slides.png") no-repeat 0 0;
            position: absolute;
            margin-top: -34px;
            top: 50%;
        }
        .swiper span.prev{
            background-position: -83px 0;
            left: 234px;
        }
        .swiper span.next{
            background-position: -124px 0;
            right: 0;
        }
        .swiper span.prev:hover{
            background-position: 0 0;
        }
        .swiper span.next:hover{
            background-position: -42px 0;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul class="clearfix">
            <li class="active">
                <div class="box"></div>
            </li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </div>
    <div class="swiper">
        <div class="container">
            <img src="lunbotu.jpg" alt="" width="1226">
            <span class="prev"></span>
            <span class="next"></span>
        </div>
    </div>
</body>
</html>

View Code

二、陰影圖

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魔降風雲變</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: #000;
        }
    </style>
</head>
<body>
    <div class="box">
        
    </div>
</body>
</html>

初始代碼

如今有這麼一個黑色的盒子：

       .box{
            width: 200px;
            height: 200px;
            background-color: #000;
           margin: 100px auto;
        }

如今讓它居中一下：

        .box{
            width: 200px;
            height: 200px;
            background-color: #000;
            margin: 100px auto;
           box-shadow: 0 0 0 red;
        }

box-shadow ：0 0 0 red; 水平方法垂直方向模糊距離陰影顏色。三個都是px，設置初始值爲0，第五個值能夠不寫，可選，默認是inside，如今一點效果也米有。

        .box{
            width: 200px;
            height: 200px;
            background-color: #000;
            margin: 100px auto;
            box-shadow: 20px 0 0 red;
        }

如今將水平距離設置20px,當前位置以左上角爲基準點，它會在當前位置往右調。陰影設置的是紅色的，第三個數越大，纔是越模糊

        .box{
            width: 200px;
            height: 200px;
            background-color: #000;
            margin: 100px auto;
            box-shadow: 20px 0 20px red;
        }

如今第三個模糊值給它20px，效果以下：

        .box{
            width: 200px;
            height: 200px;
            background-color: #000;
            margin: 100px auto;
            box-shadow: 20px 20px 20px red;
        }

再給它一個垂直方向的20px，它往下走了。也就是基於盒子的位置，在水平方向向左是正，在垂直方向，向下是正向。那麼第一個和第二個值設置正的值時，陰影部分是向右和向下走的。如今陰影的效果就出來了。

應用場景之一：凹凸字，凹凸字也用到了inside和outside。凹進去的叫inside）（內部陰影），凸出的叫outside（外部陰影）。

        .box{
            width: 200px;
            height: 200px;
            background-color: #000;
            margin: 100px auto;
            box-shadow: 0 0 20px red;
        }

像小米，用的就是0 0 一個模糊距離一個顏色

        .box{
            width: 200px;
            height: 200px;
            background-color: #000;
            margin: 100px auto;
        }
 .box:hover{ box-shadow: 0 0 20px red;
        }

它一開始應該是沒有陰影的，鼠標懸浮box的時候，給它添加的陰影屬性：這樣懸浮的時候纔出現這種效果

        .box{
            width: 200px;
            height: 200px;
            background-color: #000;
            margin: 100px auto;
           position: relative;
        }
        .box:hover{
            top: 4px;
            box-shadow: 0 0 20px red;
        }

讓它在鼠標懸浮時微微動一下，顯示動態的效果，這裏是鼠標懸浮時紅色陰影，黑盒子向下動了一點

使用場景以下，這裏鼠標懸浮就微微向上移動了一點點

而且它是用了transition的動畫屬性：

        .box{
            width: 200px;
            height: 200px;
            background-color: #000;
            margin: 100px auto;
            position: relative;
            transition: all 2s linear;
        }
        .box:hover{
            top: 8px;
            box-shadow: 0 0 20px red;
        }

這個動畫能讓陰影在2秒內漸進的方式由淡到實的顯現，鼠標離開時就在指定的2秒內淡出。這是c3的屬性

下面的webkit-transition是兼容瀏覽器用的，好比兼容ie瀏覽器。如今是劃掉了，是走的下面的值，若是是在ie上那麼webkit的這個就打開了。咱們須要加一個前綴，這個前綴就是webkit，這就是引擎，引擎是作兼容性的根本所在。不一樣的引擎不一樣的做用。

web學習網址：

不少要學習的：

點進去就能夠看到裏面學習的知識了，教你怎麼使用：也能夠看效果

https://developer.mozilla.org/zh-CN/search?q=transition&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=canvas&topic=svg&topic=webgl&topic=mobile&topic=webdev&topic=http&topic=webext&topic=standards