建站
咨詢
售后
建站咨詢
新聞中心
#css background 屬性#
民豐網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)公司,民豐網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為民豐成百上千提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)公司要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的民豐做網(wǎng)站的公司定做！
標(biāo)簽定義及使用說明
背景縮寫屬性可以在一個(gè)聲明中設(shè)置所有的背景屬性。
可以設(shè)置的屬性分別是：
- background-color 指定要使用的背景顏色
- background-position 指定背景圖像的位置
- background-size 指定背景圖片的大小
- background-image 指定要使用的一個(gè)或多個(gè)背景圖像
- background-repeat 指定如何重背景圖像
- background-origin 指定背景圖像的定位區(qū)域
- background-clip 指定背景圖像的繪畫區(qū)域
- background-attachment 設(shè)置背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)
實(shí)例
在一個(gè)div元素中設(shè)置多個(gè)背景圖像：
css
.dome{
width: 500px;
height: 500px;
margin: 0 auto;
background: #cccccc url(images/history.jpg) no-repeat ;
}
圖為：
##background-position 屬性##
如何定位background-image：
css：
.dome{
width: 500px;
height: 500px;
margin: 0 auto;
background: #cccccc url(images/history.jpg) no-repeat ;
background-position: 25px 100px;
}
圖為：
##標(biāo)簽定義及使用說明##
background-position屬性設(shè)置背景圖像的起始位置。
屬性值
- left top
- left center
- left bottom
- right top
- right center
- right bottom
- center top
- center center
center bottom
- x% y% 第一個(gè)值是水平位置，第二個(gè)值是垂直。左上角是0％0％。右下角是100％100％ 。默認(rèn)值為：0％0％
background-size 屬性
指定背景圖像的大小：
css：
.dome{
width: 500px;
height: 500px;
margin: 0 auto;
background: #cccccc url(images/history.jpg) no-repeat ;
background-position: 50% 50%;
background-size: 250px 250px;
}
圖為：
標(biāo)簽定義及使用說明
background-size屬性指定背景圖片大小。
語法
background-size: length|percentage|cover|contain;
length 設(shè)置背景圖片高度和寬度。第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置的高度。如果只給出一個(gè)值，第二個(gè)是設(shè)置為 auto(自動(dòng))
percentage 將計(jì)算相對(duì)于背景定位區(qū)域的百分比。第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置的高度。如果只給出一個(gè)值，第二個(gè)是設(shè)置為"auto(自動(dòng))"
cover 此時(shí)會(huì)保持圖像的縱橫比并將圖像縮放成將完全覆蓋背景定位區(qū)域的最小大小。
- contain 此時(shí)會(huì)保持圖像的縱橫比并將圖像縮放成將適合背景定位區(qū)域的最大大小。
如果，您認(rèn)為閱讀這篇博客讓你有些收獲，請(qǐng)您關(guān)注一下。感謝您的支持，如有不足，請(qǐng)多指教。
聯(lián)系方式：
微信號(hào)：bsl521921
本文標(biāo)題：cssbackground屬性
分享鏈接：http://fisionsoft.com.cn/article/ppdgos.html
