html+css-->background-img(背景圖的設置）

時間 2019-11-17

標籤 html+css html css background img 背景設置欄目 CSS 简体版

原文原文鏈接

背景圖：（相關驗證代碼請查看代碼，在驗證時需將當前不須要驗證的代碼註釋掉）
    1.inherit:從父元素繼承屬性設置
    2.background-repeat:平鋪(在圖片大小小於元素尺寸時背景圖默認平鋪):
      no-repeat:取消默認平鋪html

repeat-x:橫向平鋪url

repeat-y:縱向平鋪spa

3.background-size:尺寸
px、百分比:依舊默認平鋪元素3d

cover:等比放大覆蓋元素code

contain:等比放大,直到圖片的一邊達到元素的邊框htm

4.background-attachment:固定
scroll:圖片隨滾動條滾動而上下移動blog

fixed:圖片固定在元素中不會隨滾動條移動繼承

----因爲須要動態設置能夠查看代碼本身試驗
    5.background-position:定位
      方式1：
      (+:取值爲正單位:px)
      x:水平偏移 + 右邊 -左邊
      y:垂直偏移 + 下 -上圖片

----background-position:25px 50px;it

      方式2：
      (以元素邊框的左右爲基準)
      x left right center
      y   top bottom center

----background-position:left top;

----background-position:center；

(須要注意一點的是，除了設置背景圖的固定之外，在設置背景圖片的尺寸與定位時，若不取消圖片的默認平鋪，此時依然會對元素進行背景平鋪)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>背景圖</title>
        <!-- 背景圖：
                1.inherit:從父元素繼承屬性設置
                2.background-repeat:平鋪(在圖片大小小於元素尺寸時背景圖默認平鋪):
                        no-repeat:取消默認平鋪
                        repeat-x:橫向平鋪
                        repeat-y:縱向平鋪
                3.background-size:尺寸
                        px、百分比:依舊默認平鋪元素
                        cover:等比放大覆蓋元素
                        contain:等比放大,知道圖片的一邊達到元素的邊框
                4.background-attachment:固定
                        scroll:圖片隨滾動條滾動而上下移動
                        fixed:圖片固定在元素中不會隨滾動條移動
                5.background-position:定位
                        方式1：
                        (+:取值爲正 單位:px)
                        x:水平偏移 + 右邊 -左邊 
                        y:垂直偏移 + 下  -上 
                        方式2：
                        (以元素邊框的左右爲基準)
                        x  left  right center
                        y   top  bottom center
        -->    
        <style>
            .boxrepeat,.boxsize,.boxattachment,.boxposition{
                width: 300px;
                height: 400px;
                border: 1px solid #000000;
                /* 圖片可更改 */
                background-image: url(img/shoucang.png);
                /*從父元素繼承屬性的設置*/
                background-repeat-x:inherit;
            }
            .boxrepeat{
                /*取消默認平鋪*/
                background-repeat: no-repeat;
                /* 橫向平鋪 */
                background-repeat: repeat-x;
                /* 縱向平鋪 */
                background-repeat: repeat-y;

            }
            .boxsize{
                /*背景圖片的尺寸:px、百分比--依舊會默認平鋪元素*/
                background-size: 30px;
                background-size: 50%;
                /*圖片的覆蓋cover--等比放大覆蓋整個元素*/
                background-size: cover;
                /*背景圖片的包含contain--在取消默認平鋪的狀況下，將圖片等比放大直到圖片的一邊到達元素的邊框*/
                background-repeat: no-repeat;
                background-size: contain;
            }
            .boxattachment{
                /*圖片的固定--scroll:隨着頁面其他部分的的滾動而移動*/
                background-attachment: scroll;
                /*圖片的固定--fixed背景不會隨着滾輪移動 可是元素會移動而且對圖片進行一部分的覆蓋*/
                background-attachment: fixed;
            }
            .boxposition{
                /*背景圖片的定位--x:left y:top 位於左邊頂部*/
                background-repeat: no-repeat;
                /* background-position: left top; */
                /*背景圖片的定位--x:25px y:50px 向右偏移25px 向下偏移50px*/
                background-position:25px 50px;
                background-position: right bottom ;
                /*背景圖片的定位--center 居中*/
                background-position: center;
            }
        </style>
    </head>
    <body>
        <div class="boxrepeat"></div>
        <div class="boxsize"></div>
        <div class="boxattachment"></div>
        <div class="boxposition"></div>
    </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。