背景圖片的移動----background-attach-----background-repeat

本文轉載自查看原文 2018-08-20 11:06 1026 html/css

background-repeat:默認是平鋪的，也即是還有空間的話將一張接着一張顯示

設置為 no-repeat 就最多顯示一張

background-attachment:設置是否固定圖片，在有滾動條的頁面，隨着滾動條的移動將會看到圖片的不同位置

看下面的例子；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*權重：數數 id class 標簽*/
        /*100*/
        #box {
            border: 1px solid red; /*設置邊框*/
            width: 200px; /*圖片顯示的范圍*/
            height: 200px;
            background-image: url("./timg.jpg");
            background-repeat: no-repeat; /*默認平鋪，no-repeat不平鋪，就打印本身一張圖片*/
            /*background-position: 20px 20px; !*相對原來位置移動*!*/
            background-position-x: -635px; /*控制圖片x方向的移動*/
            background-position-y: -250px; /*控制圖片y方向的移動*/
            background-attachment:fixed; /*設置這條可以滾動條看到的是圖片的不同位置*/
        }

        .box2 {
            width: 24px;
            height: 33px;
            background: url("taobao.png") no-repeat 0 -265px;
            background-attachment: fixed;
        }

    </style>
</head>
<body style="height:2000px;"> /*2000px讓其有滾動條*/
<div id="box" class="box"></div>
<div class="box2"></div>

</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 background-image背景圖片 CSS background-color 、image 背景圖片 css背景圖片位置：background的position css background-size與背景圖片填滿div 給div加上背景圖片 background 背景圖片在IE8中不顯示解決方法 WinForm背景圖片及圖片位置用background-size實現背景圖片自適應瀏覽器大小，但不變形 vue設置背景圖片 css背景圖片充滿DIV