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. }  
上一篇：CSS完成尺寸同样、色调浓淡不1的颗粒转动载入动 返回下一篇：没有了