這篇文章主要講解了“html中background-size的使用方法”,文中的講解內容簡單清晰,易于學習與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學習“html中background-size的使用方法”吧!
成都創新互聯公司是一家專業提供鄂州企業網站建設,專注與成都網站制作、做網站、html5、小程序制作等業務。10年已為鄂州眾多企業、政府機構等服務。創新互聯專業網站制作公司優惠進行中。
設置背景圖片的大小,以長度值或百分比顯示,還可以通過cover和contain來對圖片進行伸縮。
語法:
background-size: auto | <長度值> | <百分比> | cover | contain
取值說明:
1、auto:默認值,不改變背景圖片的原始高度和寬度;
2、<長度值>:成對出現如200px 50px,將背景圖片寬高依次設置為前面兩個值,當設置一個值時,將其作為圖片寬度值來等比縮放;
3、<百分比>:0%~100%之間的任何值,將背景圖片寬高依次設置為所在元素寬高乘以前面百分比得出的數值,當設置一個值時同上;
4、cover:顧名思義為覆蓋,即將背景圖片等比縮放以填滿整個容器;
5、contain:容納,即將背景圖片等比縮放至某一邊緊貼容器邊緣為止。
提示:大家可以在右邊的編輯窗口輸入自己的代碼嘗試不同取值的效果。
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景圖片大小</title>
<style type="text/css">
.demo {
background: url(<a href="http://static.mukewang.com/static/img/logo_index.png">http://static.mukewang.com/static/img/logo_index.png</a>) no-repeat;
width: 300px;
height: 140px;
border: 1px solid #999;
background-size:cover;
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
</html>
感謝各位的閱讀,以上就是“html中background-size的使用方法”的內容了,經過本文的學習后,相信大家對html中background-size的使用方法這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是創新互聯,小編將為大家推送更多相關知識點的文章,歡迎關注!
分享文章:html中background-size的使用方法
文章鏈接:http://www.yijiale78.com/article10/ihdggo.html
成都網站建設公司_創新互聯,為您提供網站內鏈、電子商務、軟件開發、營銷型網站建設、移動網站建設、網站設計公司
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯