css3-11 如何改变背景图片的大小和位置
生活随笔
收集整理的這篇文章主要介紹了
css3-11 如何改变背景图片的大小和位置
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
css3-11 如何改變背景圖片的大小和位置
一、總結
一句話總結：css3相對css2本身就支持改變背景圖片的大小和位置。
1、怎么設置背景不填充padding部分？
background-origin
3)content-box
#有效區域
18 background-origin:content-box;
2、如何改變背景圖片的大小？
background-size屬性
17 background-size:100%;
background-size:100% 100%;
3、背景如何使用多重圖？
url可以累加
body
{
background-image:url(img_flwr.gif),url(img_tree.gif);
}
4、如何裁剪背景圖片？
background-clip屬性，這個方法的屬性值和background-origin一樣
background-clip: content-box;
5、background-origin和background-clip設置背景圖的區別（都限定了背景圖出現的位置）？
一個裁剪了背景圖，一個背景圖還是原圖，只是 放的位置不同了，縮放比例不同而已
二、如何改變背景圖片的大小和位置
1、相關知識
背景樣式:
1.background-size
background-size:100%;
#背景圖大小
2.background-origin
1)border-box
#邊框區域
2)padding-box
#內邊距區域
3)content-box
#有效區域
新的背景屬性
| 順序 | 描述 | CSS |
|---|---|---|
| background-clip | 規定背景的繪制區域。 | 3 |
| background-origin | 規定背景圖片的定位區域。 | 3 |
| background-size | 規定背景圖片的尺寸。 | 3 |
2、代碼
背景圖大小和位置
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>index</title>
6 <style>
7 *{
8 font-family: 微軟雅黑;
9 }
10
11 div{
12 width:500px;
13 height:500px;
14 border:10px solid transparent;
15 padding:10px;
16 background:url('b.png') no-repeat;
17 background-size:100%;
18 background-origin:border-box;
19 }
20 </style>
21 </head>
22 <body>
23 <div>
24 <p>linux is very much!</p>
25 <p>linux is very much!</p>
26 <p>linux is very much!</p>
27 <p>linux is very much!</p>
28 <p>linux is very much!</p>
29 </div>
30 </body>
31 </html>
裁剪背景圖
<style>
#example1 {
border: 10px dotted black;
padding:35px;
background: yellow;
}
#example2 {
border: 10px dotted black;
padding:35px;
background: yellow;
background-clip: padding-box;
}
#example3 {
border: 10px dotted black;
padding:35px;
background: yellow;
background-clip: content-box;
}
</style>
總結
以上是生活随笔為你收集整理的css3-11 如何改变背景图片的大小和位置的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 基础训练——合并电话簿
- 下一篇： 《永恒星语》钉宫理惠变声女仆为你服务