CSS3对情况照片的剪裁及规格和部位的设置方式

日期:2021-01-20 类型:科技新闻 

关键词:如何制作微信小游戏,微信游戏小程序,公众号游戏,h5小游戏模板,小程序游戏源码

情况剪裁

CSS Code拷贝內容到剪贴板
  1. background-clip:border-box|padding-box|content-box|text  

用于特定background是不是包括content以外的border,padding。默认设置值为border-box,即background从包括border在内的地区刚开始3D渲染,IE的默认设置主要表现也等同于于border-box
情况从border(即包含border在内)刚开始绘图(3D渲染)

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
标值表明方法:

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. }