CSS3中有哪些新增的背景屬性

本篇文章為大家展示了CSS3中有哪些新增的背景屬性，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

10余年專注成都網站制作，成都定制網頁設計，個人網站制作服務，為大家分享網站制作知識、方案，網站設計流程、步驟,成功服務上千家企業。為您提供網站建設,網站制作,網頁設計及定制高端網站建設服務,專注于成都定制網頁設計,高端網頁制作,對成都混凝土攪拌罐車等多個領域，擁有豐富的網站建設經驗。

CSS3新增屬性：background-clip ，background-origin ， background-size

1.background-clip

背景的剪裁屬性，是從指定位置開始繪制。

2.background-origin

background-Origin屬性指定了背景圖像的位置區域。

** 上面兩個的屬性值都是border-box， padding-box ， content-box（這里建議要對盒子模型有足夠了解，那么在這里就看這3個屬性值就一清二楚了），或者看下圖：

CSS3中有哪些新增的背景屬性

background-clip就是相當于再這3個位置的哪個地方開始裁剪，來達到其相應的效果，看代碼




  
  Title
  



沒有背景剪裁 (border-box沒有定義):

  Lorem Ipsum Dolor
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam uam erat volutpat.

background-clip: padding-box:

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam uam erat volutpat.

background-clip: content-box:

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam uam erat volutpat.

Title

背景圖像邊界框的相對位置

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam uam erat volutpat.

背景圖像的相對位置的內容框

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam uam erat volutpat.

background-size指定背景圖像的大小。CSS3以前，背景圖像大小由圖像的實際大小決定。CSS3中background-size讓我們重新在不同的環境中指定背景圖片的大小。您可以指定像素或百分比大小。你指定的大小是相對于父元素的寬度和高度的百分比的大小。

①.length設置背景圖片高度和寬度。第一個值設置寬度，第二個值設置的高度。如果只給出一個值，第二個是設置為 auto(自動)

②.lpercentage將計算相對于背景定位區域的百分比。第一個值設置寬度，第二個值設置的高度。如果只給出一個值，第二個是設置為"auto(自動)"

③.cover此時會保持圖像的縱橫比并將圖像縮放成將完全覆蓋背景定位區域的最小大小。

④.contain此時會保持圖像的縱橫比并將圖像縮放成將適合背景定位區域的最大大小。

上述內容就是CSS3中有哪些新增的背景屬性，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注創新互聯行業資訊頻道。

老熟女激烈的高潮_日韩一级黄色录像_亚洲1区2区3区视频_精品少妇一区二区三区在线播放_国产欧美日产久久_午夜福利精品导航凹凸

重慶分公司，新征程啟航

CSS3中有哪些新增的背景屬性

Lorem Ipsum Dolor

Lorem Ipsum Dolor

Lorem Ipsum Dolor

Lorem Ipsum Dolor

Lorem Ipsum Dolor

其他資訊