HTML與CSS中背景相關(guān)屬性怎么用
小編給大家分享一下HTML與CSS中背景相關(guān)屬性怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
成都創(chuàng)新互聯(lián)公司自2013年起，先為吳橋等服務(wù)建站，吳橋等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為吳橋企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
一.背景尺寸屬性
1.什么是背景尺寸屬性
背景尺寸屬性是CSS3中新增的一個(gè)屬性,專門用于設(shè)置背景圖片大小
background-size:xxxx;
取值:
1.具體像素>>background-size:200px100px;
2.百分比>>background-size:100%80%;
3.寬度等比拉伸>>background-size:auto100px;
4.高度等比拉伸>>background-size:100pxauto;
5.cover>>background-size:cover;
5.1告訴系統(tǒng)圖片需要等比拉伸
5.2告訴系統(tǒng)圖片需要拉伸到寬度<a>和</a>高度都填滿元素
6.contain>>background-size:contain;
6.1告訴系統(tǒng)圖片需要等比拉伸
6.2告訴系統(tǒng)圖片需要拉伸到寬度<a>或</a>高度都填滿元素(<a>只保證一邊填滿</a>)
background-size
二.背景圖片定位區(qū)域?qū)傩?/p>
<a>background-origin</a>:告訴系統(tǒng)背景圖片從什么區(qū)域開始顯示,默認(rèn)情況下就是從padding區(qū)域開始顯示;
取值:
1.<a>padding-box</a>:默認(rèn)值>>background-origin:padding-box;告訴系統(tǒng)背景圖片從什么區(qū)域開始顯示,默認(rèn)情況下就是從padding區(qū)域開始顯示;
2.<a>border-box</a>>>background-origin:border-box;從border位置開始
3.<a>content-box</a>>>background-origin:content-box;從content位置開始
<htmllang="en"><head><metacharset="UTF-8"><title>113-背景圖片定位區(qū)域?qū)傩?lt;/title><style>*{margin:0;padding:0;}ulli{list-style:none;float:left;width:100px;height:100px;text-align:center;line-height:100px;border:20pxdashed#000;padding:50px;margin-left:20px;background:url("images/dog.jpg")no-repeat;}ulli:nth-child(2){/*告訴系統(tǒng)背景圖片從什么區(qū)域開始顯示,默認(rèn)情況下就是從padding區(qū)域開始顯示*/background-origin:padding-box;}ulli:nth-child(3){background-origin:border-box;}ulli:nth-child(4){background-origin:content-box;}</style></head><body><ul><li>默認(rèn)</li><li>padding</li><li>border</li><li>content</li></ul></body></html>
背景圖片定位區(qū)域?qū)傩?/p>
三.背景繪制區(qū)域?qū)傩?/p>
<a>background-clip:xxx;</a>背景繪制區(qū)域?qū)傩允菍ｉT用于指定從哪個(gè)區(qū)域開始繪制背景的,默認(rèn)情況下會(huì)從border區(qū)域開始繪制背景
<htmllang="en"><head><metacharset="UTF-8"><title>114-背景繪制區(qū)域?qū)傩?lt;/title><style>*{margin:0;padding:0;}ulli{list-style:none;float:left;width:100px;height:100px;text-align:center;line-height:100px;border:20pxdashed#000;padding:50px;margin-left:20px;background:redurl("images/dog.jpg")no-repeat;}ulli:nth-child(2){/*背景繪制區(qū)域?qū)傩允菍ｉT用于指定從哪個(gè)區(qū)域開始繪制背景的,默認(rèn)情況下會(huì)從border區(qū)域開始繪制背景*/background-clip:padding-box;}ulli:nth-child(3){background-clip:border-box;}ulli:nth-child(4){background-clip:content-box;}</style></head><body><ul><li>默認(rèn)</li><li>padding</li><li>border</li><li>content</li></ul></body></html>
背景繪制區(qū)域?qū)傩?紅色為繪制區(qū)域)
四.多重背景圖片
<a>先添加的背景圖片會(huì)蓋住后添加的背景圖片</a>
元素c3之后可以設(shè)置多張背景圖片
多張背景圖片之間用逗號(hào)隔開即可
background:url("images/animal1.png")no-repeatlefttop,url("images/animal2.png")no-repeatrighttop,url("images/animal3.png")no-repeatleftbottom;
注意點(diǎn):
先添加的背景圖片會(huì)蓋住后添加的背景圖片
background:url("images/animal1.png")no-repeatlefttop,url("images/animal2.png")no-repeatrighttop,url("images/animal3.png")no-repeatleftbottom,url("images/animal4.png")no-repeatrightbottom,url("images/animal5.png")no-repeatcentercenter;
建議在編寫多重背景時(shí)拆開編寫
background-image:url("images/animal1.png"),url("images/animal2.png"),url("images/animal3.png");background-repeat:no-repeat,no-repeat,no-repeat;background-position:lefttop,righttop,leftbottom;
完整代碼如下:
<htmllang="en"><head><metacharset="UTF-8"><title>115-多重背景圖片</title><style>*{margin:0;padding:0;}p{width:500px;height:500px;border:1pxsolid#000;margin:0auto;/*多張背景圖片之間用逗號(hào)隔開即可注意點(diǎn):先添加的背景圖片會(huì)蓋住后添加的背景圖片建議在編寫多重背景時(shí)拆開編寫*//*background:url("images/animal1.png")no-repeatlefttop,url("images/animal2.png")no-repeatrighttop,url("images/animal3.png")no-repeatleftbottom,url("images/animal4.png")no-repeatrightbottom,url("images/animal5.png")no-repeatcentercenter;*/background-image:url("images/animal1.png"),url("images/animal2.png"),url("images/animal3.png");background-repeat:no-repeat,no-repeat,no-repeat;background-position:lefttop,righttop,leftbottom;}</style></head><body><p></p></body></html>
多重背景圖片
四.多重背景圖片聯(lián)系
<a>先添加的背景圖片會(huì)蓋住后添加的背景圖片</a>
<htmllang="en"><head><metacharset="UTF-8"><title>116-多重背景圖片-練習(xí)</title><style>*{margin:0;padding:0;}p{width:600px;height:190px;border:1pxsolid#000;margin:100pxauto;background-image:url("images/bg-plane.png"),url("images/bg-sun.png"),url(images/bg-clouds.png);background-repeat:no-repeat,no-repeat,no-repeat;background-size:50px50px,50px50px,autoauto;background-position:50px150px,400px50px,0px0px;animation:move10slinear0sinfinitenormal;}@keyframesmove{from{background-position:50px150px,400px50px,0px0px;}to{background-position:500px-150px,400px50px,-600px0px;}}</style></head><body><p></p></body></html>
以上是“HTML與CSS中背景相關(guān)屬性怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
本文標(biāo)題：HTML與CSS中背景相關(guān)屬性怎么用
文章路徑：http://www.rwnh.cn/article16/jdjpgg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、做網(wǎng)站、響應(yīng)式網(wǎng)站、網(wǎng)站導(dǎo)航、網(wǎng)站建設(shè)、云服務(wù)器
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
