欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS3對背景圖片的裁剪及尺寸和位置的設定方法

Web前端實驗室   發(fā)布時間：2016-03-07 11:32:27   作者：佚名   我要評論
這篇文章主要介紹了CSS3對背景圖片的裁剪及尺寸和位置的設定方法,在IE瀏覽器中要注意一下兼容性,需要的朋友可以參考下

背景裁剪

CSS Code復制內容到剪貼板
  1. background-clip:border-box|padding-box|content-box|text  

用于指定background是否包含content之外的border,padding。默認值為border-box，即background從包含border在內的地方開始渲染，IE的默認表現(xiàn)也等同于border-box
背景從border(即包括border在內)開始繪制（渲染）

CSS Code復制內容到剪貼板
  1. #background-clip-border{   
  2.  -moz-background-clip:border-box;           /* For Firefox */  
  3.  -webkit-background-clip:border-box;        /* For Chrome, Safari */  
  4.  -o-background-clip:border-box;             /* For Opera */  
  5.  -ms-background-clip:border-box;            /* For IE */  
  6.  background-clip:border-box;                /* For Future */  
  7. }  

背景從padding(即包括padding在內)開始繪制：

CSS Code復制內容到剪貼板
  1. #background-clip-padding{   
  2.  -moz-background-clip:padding-box;           /* For Firefox */  
  3.  -webkit-background-clip:padding-box;        /* For Chrome, Safari */  
  4.  -o-background-clip:padding-box;             /* For Opera */  
  5.  -ms-background-clip:padding-box;            /* For IE */  
  6.  background-clip:padding-box;                /* For Future */  
  7. }  

背景從content(即內容部分)開始繪制：

CSS Code復制內容到剪貼板
  1. #background-clip-content{   
  2.  -moz-background-clip:content-box;           /* For Firefox */  
  3.  -webkit-background-clip:content-box;        /* For Chrome, Safari */  
  4.  -o-background-clip:content-box;             /* For Opera */  
  5.  -ms-background-clip:content-box;            /* For IE */  
  6.  background-clip:content-box;                /* For Future */  
  7. }  

將背景裁剪作為文本的填充色：

CSS Code復制內容到剪貼板
  1. /* 如果你的瀏覽器支持text值，你將會看到本段文字的顏色直接使用了背景顏色：紅色，且背景將被裁剪掉不再顯示 */  
  2. #background-clip-text{   
  3.  background-color:#f00;   
  4.  -webkit-text-fill-color:transparent;   
  5.  -webkit-background-clip:text;               /* For Chrome, Safari */  
  6.  background-clip:text;                       /* For Future */  
  7. }  


背景圖片位置

CSS Code復制內容到剪貼板
  1. background-origin:border-box|padding-box|content-box  

以border(即包括border)為原點計算背景圖的background-position：

CSS Code復制內容到剪貼板
  1. #background-origin-border{   
  2.  -moz-background-origin:border-box;         /* For Firefox */  
  3.  -webkit-background-origin:border-box;      /* For Chrome, Safari */  
  4.  -o-background-origin:border-box;           /* For Opera */  
  5.  -ms-background-origin:border-box;          /* For IE */  
  6.  background-origin:border-box;              /* For Future */  
  7. }  

以padding(即包括padding)為原點計算背景圖的background-position：

CSS Code復制內容到剪貼板
  1. #background-origin-padding{   
  2.  -moz-background-origin:padding-box;         /* For Firefox */  
  3.  -webkit-background-origin:padding-box;      /* For Chrome, Safari */  
  4.  -o-background-origin:padding-box;           /* For Opera */  
  5.  -ms-background-origin:padding-box;          /* For IE */  
  6.  background-origin:padding-box;              /* For Future */  
  7. }  

以content(即從content開始)為原點計算背景圖的background-position：

CSS Code復制內容到剪貼板
  1. #background-origin-content{   
  2.  -moz-background-origin:content-box;         /* For Firefox */  
  3.  -webkit-background-origin:content-box;      /* For Chrome, Safari */  
  4.  -o-background-origin:content-box;           /* For Opera */  
  5.  -ms-background-origin:content-box;          /* For IE */  
  6.  background-origin:content-box;              /* For Future */  
  7. }  


圖片背景尺寸

CSS Code復制內容到剪貼板
  1. background-size:[length|percentage|auto]{1,2}|cover|contain  

 用于設置背景圖片的大小，有2個可選值，第1個值用于指定背景圖的width，第2個值用于指定背景圖的height，如果只指定1個值得，則第2個值默認為auto
數(shù)值表示方式：

CSS Code復制內容到剪貼板
  1. #background-size{   
  2.  background-size:300px 100px;   
  3. }  

百分比表示方式：

CSS Code復制內容到剪貼板
  1. #background-size2{   
  2.  background-size:40% 80%;   
  3. }  

等比擴展圖片來填滿元素，即cover值：

CSS Code復制內容到剪貼板
  1. #background-size3{   
  2.  background-size:cover;   
  3. }  

等比縮小圖片來適應元素的尺寸，即contain值：

CSS Code復制內容到剪貼板
  1. #background-size4{   
  2.  background-size:contain;   
  3. }  

以圖片自身大小來填充元素，即auto值：

CSS Code復制內容到剪貼板
  1. #background-size5{   
  2.  background-size:auto;   
  3. }  

相關文章

  • css3實現(xiàn)背景圖片顏色修改的多種方式

    這篇文章主要介紹了css3實現(xiàn)背景圖片顏色修改的多種方式,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起
    2021-04-13

  • CSS3 菱形拼圖實現(xiàn)只旋轉div 背景圖片不旋轉功能

    這篇文章主要介紹了CSS3 菱形拼圖實現(xiàn)只旋轉div 背景圖片不旋轉功能,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2021-03-29

  • CSS3只讓背景圖片旋轉180度的實現(xiàn)示例

    這篇文章主要介紹了CSS3只讓背景圖片旋轉180度的實現(xiàn)示例。文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一
    2021-03-09

  • css3給背景圖片加顏色遮罩的方法

    前段時間在開發(fā)中，遇到需要給背景層加顏色遮罩的項目，現(xiàn)在特定總結一下給背景圖層加顏色遮罩的方法，感興趣的朋友跟隨小編一起看看吧
    2019-11-05

  • css3實現(xiàn)一個div設置多張背景圖片及background-image屬性實例演示

    這篇文章主要介紹了css3實現(xiàn)一個div設置多張背景圖片及background-image屬性,同時對于css3背景漸變也做了詳細的解釋,水平漸變,左上角漸變等等方式,需要的朋友可以參考下
    2017-08-10

  • CSS的background屬性及CSS3的背景圖片設置總結

    這篇文章主要介紹了CSS的background屬性及CSS3的背景圖片設置總結,背景圖片的顯示區(qū)域和定位是非常值得注意的地方,需要的朋友可以參考下
    2016-06-13

  • 多重CSS背景動畫實現(xiàn)方法示例

    CSS背景動畫很長時間以來都是一個熱門話題，很多時候都是因為效果特別絢麗，而且不需要額外的技術。最近有人問我是否可以給頁面上一個指定的元素安排多重背景動畫，答案是y
    2014-04-04

  • css3實現(xiàn)背景圖片拉伸效果像桌面壁紙一樣

    使用css3 屬性：background-size可以輕松實現(xiàn)像桌面壁紙一樣拉伸，下面為大家詳細介紹下具體的相關實現(xiàn)過程，有此需求的朋友可以參考下，希望對大家有所幫助
    2013-08-19

  • css3背景圖片透明疊加屬性cross-fade簡介及用法實例

    據(jù)說iOS6系統(tǒng)(iPhone5)增加了兩個CSS3屬性，一個是CSS3 filters – CSS3濾鏡另外一個是CSS3 Cross-fade – CSS3交叉淡入淡出,接下來為您介紹cross-fade屬性，感興趣的朋友
    2013-01-08

  • CSS3系列教程:背景圖片(背景大小和多背景圖) 應用說明

    背景圖片/紋理有很多種使用方式，常常用于為添加網(wǎng)站的最佳的界面美化?，F(xiàn)在它在CSS3中被重視，我們可以應用多背景圖和背景圖片尺寸來實現(xiàn)更完美的效果,需要的朋友可以了解
    2012-12-19

最新評論