CSS3關於background-size屬性的詳細介紹
- php中世界最好的语言原創
- 2017-11-30 16:34:492653瀏覽
我們知道，在CSS3裡有一項很重要的屬性，bachground-size屬性，它的作用就是定義背景圖片的大小，值有5種，auto , 像素值 ,百分比 , cover , contain。今天就教大家如何使用bachground-size屬性。
background-size:auto，預設值，以圖片自身大小填滿元素，根據元素大小來調節自身比例，不會讓圖片變形。
CSS3關於background-size屬性
1.
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>background-size属性</title>
<style type="text/css">
div{
width:300px;
height:150px;
border:1px solid black;
background:url("photo.jpg") no-repeat;
}
</style></head><body>
<div></div></body></html>2.背景圖片本身大小—width:200px ，height:133px ，上述程式碼的效果圖如下：
像素值，例如 30px 50px，分別表示width height
CSS3關於background-size屬性
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>background-size属性</title>
<style type="text/css">
div{
width:300px;
height:150px;
border:1px solid black;
background:url("photo.jpg") no-repeat;
background-size:250px 100px;
}
</style></head><body>
<div></div></body></html>#相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：
#以上是CSS3關於background-size屬性的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn