成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

CSS基礎(chǔ)-background的那些屬性

explorer_ddf / 1659人閱讀

摘要：的那些屬性背景的意思常用的六個(gè)屬性背景顏色背景圖像圖片位置圖片是否重復(fù)圖片定位，背景裁剪。當(dāng)不存在數(shù)值的時(shí)候，順序無(wú)所謂。疑問(wèn)的復(fù)合屬性如何寫(xiě)呢解答先考慮是否圖片重復(fù)，在考慮位置。

background的那些屬性

background:背景的意思
常用的六個(gè)屬性

1.background-color:背景顏色
2.background-image:背景圖像
3.background-position:圖片位置
4.background-repeat:圖片是否重復(fù)
5.background-attachment:圖片定位（fixed，scroll）
6.background-clip: 背景裁剪。有三個(gè)屬性值為
border-box（圖片或者顏色從邊框開(kāi)始）;
padding-box（圖片或者顏色從padding部分開(kāi)始）;
content-box圖片或者顏色從content部分開(kāi)始）;

疑惑點(diǎn)1:圖像和顏色到底是從邊框開(kāi)始的？還是從內(nèi)容開(kāi)始的？

解答：背景圖像和顏色默認(rèn)是從border開(kāi)始鋪上去的。如果沒(méi)有border就從下一級(jí)開(kāi)始。

運(yùn)行效果圖：

疑惑點(diǎn)2:如果想設(shè)置圖像開(kāi)始的位置怎么辦？

解答：
background-clip: 背景裁剪。有三個(gè)屬性值為
border-box（圖片或者顏色從邊框開(kāi)始）;
padding-box（圖片或者顏色從padding部分開(kāi)始）;
content-box圖片或者顏色從content部分開(kāi)始）;

疑惑點(diǎn)3:background-position的屬性值有那些寫(xiě)法？

    解答：定位是從border的左上角開(kāi)始。background-position：x,y;

第一個(gè)值是距離左邊的距離
第二個(gè)值是距離上邊的距離
x:left,center,right
y:top,center,bottom

background-position：10px; 只有一個(gè)值時(shí)，默認(rèn)第二個(gè)值是center
background-position：10px bottom;
background-position: bottom 10px ;當(dāng)存在數(shù)值的時(shí)候，順序?qū)戝e(cuò)則不顯示。存在數(shù)值時(shí)順序必須寫(xiě)對(duì)。要按照前面是x值，后面是y值來(lái)寫(xiě)。eg：background-position: 10px bottom ;才正確。
background-position: bottom right;當(dāng)不存在數(shù)值的時(shí)候，順序無(wú)所謂。

疑問(wèn)4: background的復(fù)合屬性如何寫(xiě)呢?
解答：background:先考慮是否圖片重復(fù)，在考慮位置。




    
    Title
    









效果圖為：

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/52134.html

相關(guān)文章

  • CSS基礎(chǔ)-background的那些屬性

    摘要：的那些屬性背景的意思常用的六個(gè)屬性背景顏色背景圖像圖片位置圖片是否重復(fù)圖片定位，背景裁剪。當(dāng)不存在數(shù)值的時(shí)候，順序無(wú)所謂。疑問(wèn)的復(fù)合屬性如何寫(xiě)呢解答先考慮是否圖片重復(fù)，在考慮位置。 background的那些屬性 background:背景的意思常用的六個(gè)屬性 1.background-color:背景顏色 2.background-image:背景圖像 3.background-po...

    venmos 評(píng)論0 收藏0

  • HTML/CSS基礎(chǔ)知識(shí)總結(jié)

    摘要：控制表單控件的禁用狀態(tài)。這個(gè)符號(hào)只有會(huì)識(shí)別漸進(jìn)識(shí)別的方式，從總體中逐漸排除局部。接著，再次使用將和分離開(kāi)來(lái)，這樣已經(jīng)獨(dú)立識(shí)別。生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。元素不能用作語(yǔ)義用途以外的其他目的。 HTML、CSS部分 要點(diǎn)：對(duì)Web標(biāo)準(zhǔn)的理解、瀏覽器差異、CSS基本功：布局、盒子模型、選擇器優(yōu)先級(jí)及使用、HTML5、CSS3、移動(dòng)端開(kāi)發(fā) 技術(shù)等 1.Doctype作用? ...

    CoderStudy 評(píng)論0 收藏0

  • HTML/CSS基礎(chǔ)知識(shí)總結(jié)

    摘要：控制表單控件的禁用狀態(tài)。這個(gè)符號(hào)只有會(huì)識(shí)別漸進(jìn)識(shí)別的方式，從總體中逐漸排除局部。接著，再次使用將和分離開(kāi)來(lái)，這樣已經(jīng)獨(dú)立識(shí)別。生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。元素不能用作語(yǔ)義用途以外的其他目的。 HTML、CSS部分 要點(diǎn)：對(duì)Web標(biāo)準(zhǔn)的理解、瀏覽器差異、CSS基本功：布局、盒子模型、選擇器優(yōu)先級(jí)及使用、HTML5、CSS3、移動(dòng)端開(kāi)發(fā) 技術(shù)等 1.Doctype作用? ...

    zhoutao 評(píng)論0 收藏0

  • css魔幻屬性跟進(jìn)篇

    摘要：中是這樣定義的屬性指定一個(gè)元素應(yīng)沿其容器的左側(cè)或右側(cè)放置，允許文本和內(nèi)聯(lián)元素環(huán)繞它。其同樣適用于設(shè)置屬性為絕對(duì)定位或固定定位的內(nèi)聯(lián)元素。至于為什么，可以理解為內(nèi)聯(lián)元素沒(méi)有盒模型，其高度由內(nèi)容決定。 白話：即上一篇我腦中飄來(lái)飄去的css魔幻屬性自己的文章推出之后，這是自己寫(xiě)的第四篇CSS相關(guān)的文章，文章絕大部分是自己工作總結(jié)得來(lái)，另一部分是平日sf回答的與面試中向面試官交流學(xué)到的，都是一...

    oogh 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<