Css背景樣式的屬性怎么設置

本篇內容主要講解“Css背景樣式的屬性怎么設置”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Css背景樣式的屬性怎么設置”吧!

一、CSS允許應用純色作為背景，也允許使用背景圖像創建相當復雜的效果

二、屬性：

    background-color    設置元素的背景顏色

body{
    background-color: darkgray;
}
<p>測試一下背景是否可以繼承</p>

background-color這個屬性是不可以被繼承的

p{
    background-color: aqua;
}

這時候可以看到p元素加上了一個背景顏色，但是這個時候背景顏色比較長，它已經超出了文字的范圍，要想修改的話只能在css樣式來進行修改，修改它整個p標簽的寬度

p{
    width: 150px;
    background-color: aqua;
}

現在可以看到p標簽寬度被修改后的效果，但是這個時候的背景顏色有點窄，那么可以通過一個padding屬性給它增寬

p{
    width: 150px;
    padding: 10px;
    background-color: aqua;
}

    background-p_w_picpath    把圖片設置為背景

body{
    background-p_w_picpath: url("1.jpg");
}

也可以單獨地給一個標簽加上背景顏色

p{
    background-p_w_picpath: url("1.jpg");
}

    background-position    設置背景圖片的起始位置

body{
    background-p_w_picpath: url("1.jpg");
    background-repeat: no-repeat;
    background-position: right;
}

這時候背景圖片跑到了右邊并且圖片只剩下一半了

其實這個屬性很少單獨出現，我們看到的是一個right，其實它是出現了兩個屬性

right代表的是“right”和“center”

right代表的是圖片所處的當前視圖的位置

center是代表當前圖片要顯示的位置（即圖片從中間開始顯示）

這個時候可以對background-position屬性值做一下修改

background-position: right top;

這時候代表背景圖片在視圖的右側顯示，從圖片的頂部開始（可以看到全面顯示的效果）

也可以在background-position內添加具體的數值

background-position: 0px 0px;

這時候代表從左上角（0,0）點開始

很多時候用數值來確定它的位置會方便一些

也可以用百分數來確定它的位置

    background-p_w_upload    背景圖像是否固定或者隨著頁面的其余部分滾動

body{
    background-p_w_picpath: url("1.jpg");
    background-repeat: no-repeat;
    background-p_w_upload: fixed;
}

默認情況下背景圖片隨著頁面滾動

這里把background-p_w_upload屬性設置為不隨著頁面滾動

    background-repeat    設置背景圖片是否及如何重復

這里在前面已經使用到了

三、CSS3背景

    background-size    規定背景圖片的尺寸

body{
    background-p_w_picpath: url("1.jpg");
    background-repeat: no-repeat;
    background-size: 600px 600px;
}

    background-origin    規定背景圖片的定位區域

    background-clip    規定背景的繪制區域   

到此，相信大家對“Css背景樣式的屬性怎么設置”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！