您好,登錄后才能下訂單哦!
#css background 屬性#
標簽定義及使用說明
背景縮寫屬性可以在一個聲明中設置所有的背景屬性。
可以設置的屬性分別是:
實例
在一個div元素中設置多個背景圖像:
<body>
<div class="dome"></div>
</body>
css
.dome{
width: 500px;
height: 500px;
margin: 0 auto;
background: #cccccc url(images/history.jpg) no-repeat ;
}
圖為:
##background-position 屬性##
如何定位background-image:
<body>
<div class="dome"></div>
</body>
css:
.dome{
width: 500px;
height: 500px;
margin: 0 auto;
background: #cccccc url(images/history.jpg) no-repeat ;
background-position: 25px 100px;
}
圖為:
##標簽定義及使用說明##
background-position屬性設置背景圖像的起始位置。
屬性值
center bottom
指定背景圖像的大小:
<body>
<div class="dome"></div>
</body>
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;
}
圖為:
標簽定義及使用說明
background-size屬性指定背景圖片大小。
語法
background-size: length|percentage|cover|contain;
length 設置背景圖片高度和寬度。第一個值設置寬度,第二個值設置的高度。如果只給出一個值,第二個是設置為 auto(自動)
percentage 將計算相對于背景定位區域的百分比。第一個值設置寬度,第二個值設置的高度。如果只給出一個值,第二個是設置為"auto(自動)"
cover 此時會保持圖像的縱橫比并將圖像縮放成將完全覆蓋背景定位區域的最小大小。
如果,您認為閱讀這篇博客讓你有些收獲,請您關注一下。感謝您的支持,如有不足,請多指教。
聯系方式:
微信號:bsl521921
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。