溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

css中背景圖片開(kāi)始的位置怎么設(shè)置

發(fā)布時(shí)間：2021-12-27 17:59:56 來(lái)源：億速云 閱讀：449 作者：iii 欄目：開(kāi)發(fā)技術(shù)

這篇文章主要介紹“css中背景圖片開(kāi)始的位置怎么設(shè)置”，在日常操作中，相信很多人在css中背景圖片開(kāi)始的位置怎么設(shè)置問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”css中背景圖片開(kāi)始的位置怎么設(shè)置”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

一、這一節(jié)講解的是背景圖片開(kāi)始的位置也是可以設(shè)置的：

background-orgin:數(shù)值值；

這里的屬性值就是開(kāi)始的位置，可分為：

padding-left（默認(rèn)）；content-box；border-box    <style>
        *{
            margin:0;
            padding;0;        }
        ul li{
            list-style: none;
            float:left;
            width: 200px;
            height: 200px;
            text-align:center;
            line-height:100px;
            border:10px dashed black;
            margin-left: 20px;
            background:url("image/mountain.jpg") no-repeat;
        }
        ul li:nth-child(2){
            background-origin: padding-box;/*背景圖片默認(rèn)從什么區(qū)域開(kāi)始顯示,默認(rèn)就是從padding區(qū)域開(kāi)始顯示*/
        }
        ul li:nth-child(3){
            background-origin: border-box;
        }
        ul li:nth-child(4){
            background-origin: content-box;
        }...............省略代碼............
<ul>
    <li>默認(rèn)</li>
    <li>padding</li>
    <li>border</li>
    <li>content</li>

css中背景圖片開(kāi)始的位置怎么設(shè)置

二、背景繪制區(qū)域?qū)傩?/p>

與剛才的背景圖片繪制區(qū)域定位類似，我們只需要修改一個(gè)屬性就可以達(dá)到定位背景顏色的目的

backgroud-clip:數(shù)值值；

這里的屬性值就是開(kāi)始的位置，可分為：

 padding-left（默認(rèn)）；content-box；border-box    <style>
        *{
            margin:0;
            padding;0;        }
        ul li{
            list-style: none;
            float:left;
            width: 200px;
            height: 200px;
            text-align:center;
            line-height:200px;
            border:10px dashed black;
            margin-left: 20px;
            background:url("image/mountain.jpg") no-repeat;
            background-color:red;
        }
        ul li:nth-child(2){
            background-origin: padding-box;/*背景圖片默認(rèn)從什么區(qū)域開(kāi)始顯示,默認(rèn)就是從padding區(qū)域開(kāi)始顯示*/
            background-clip:padding-box;/*背景繪制區(qū)域的屬性是專門(mén)用于制定從哪個(gè)區(qū)域開(kāi)始繪制背景的，默認(rèn)情況下就是從
            border區(qū)域開(kāi)始繪制*/
        }
        ul li:nth-child(3){
            background-origin: border-box;
            background-clip:border-box;
        }
        ul li:nth-child(4){
            background-origin: content-box;
            background-clip:content-box;
        }</style></head><body><ul>
    <li>默認(rèn)</li>
    <li>padding</li>
    <li>border</li>
    <li>content</li></ul>

到此，關(guān)于“css中背景圖片開(kāi)始的位置怎么設(shè)置”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手