日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問 生活随笔！

生活随笔

當(dāng)前位置： 首頁 >

css3-11 如何改变背景图片的大小和位置

發(fā)布時間：2023/12/15 47 生活家
生活随笔 收集整理的這篇文章主要介紹了 css3-11 如何改变背景图片的大小和位置 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

css3-11 如何改變背景圖片的大小和位置

一、總結(jié)

一句話總結(jié)：css3相對css2本身就支持改變背景圖片的大小和位置。

1、怎么設(shè)置背景不填充padding部分？

background-origin
3)content-box
#有效區(qū)域

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設(shè)置背景圖的區(qū)別（都限定了背景圖出現(xiàn)的位置）？

一個裁剪了背景圖，一個背景圖還是原圖，只是 放的位置不同了，縮放比例不同而已

二、如何改變背景圖片的大小和位置

1、相關(guān)知識

背景樣式:
1.background-size
background-size:100%;
#背景圖大小

2.background-origin
1)border-box
#邊框區(qū)域
2)padding-box
#內(nèi)邊距區(qū)域
3)content-box
#有效區(qū)域

新的背景屬性

順序 描述 CSS
background-clip 規(guī)定背景的繪制區(qū)域。 3
background-origin 規(guī)定背景圖片的定位區(qū)域。 3
background-size 規(guī)定背景圖片的尺寸。 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>

總結(jié)

以上是生活随笔為你收集整理的css3-11 如何改变背景图片的大小和位置的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。