CSS3对背景图片的裁剪及尺寸和位置的设定方法


Posted in HTML / CSS onMarch 07, 2016

背景裁剪

CSS Code复制内容到剪贴板
  1. background-clip:border-box|padding-box|content-box|text  

用于指定background是否包含content之外的border,padding。默认值为border-box,即background从包含border在内的地方开始渲染,IE的默认表现也等同于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
数值表示方式:

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. }  
HTML / CSS 相关文章推荐
一款利用纯css3实现的360度翻转按钮的实例教程
Nov 05 HTML / CSS
详解CSS3中常用的样式【基本文本和字体样式】
Oct 20 HTML / CSS
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
Oct 29 HTML / CSS
html5组织文档结构_动力节点Java学院整理
Jul 11 HTML / CSS
HTML5实现的震撼3D焦点图动画的示例代码
Sep 26 HTML / CSS
html5 兼容IE6结构的实现代码
May 14 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
Apr 25 HTML / CSS
H5 video poster属性设置视频封面的方法
May 25 HTML / CSS
Canvas波浪花环的示例代码
Aug 21 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
Sep 15 HTML / CSS
Bootstrap File Input文件上传组件
Dec 01 HTML / CSS
CSS 一行代码实现头像与国旗的融合
Oct 24 HTML / CSS
用CSS3的box-reflect设置文字倒影效果的方法讲解
Mar 07 #HTML / CSS
CSS3哪些新特性值得称赞
Mar 02 #HTML / CSS
基于DOM+CSS3实现OrgChart组织结构图插件
Mar 02 #HTML / CSS
基于CSS3实现立方体自转效果
Mar 01 #HTML / CSS
CSS3中几个新增加的盒模型属性使用教程
Mar 01 #HTML / CSS
使用CSS3实现多列布局与多背景的技巧
Feb 29 #HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
Feb 29 #HTML / CSS
You might like
如何提高MYSQL数据库的查询统计速度 select 索引应用
2007/04/11 PHP
thinkphp的静态缓存用法分析
2014/11/29 PHP
php实现从上传文件创建缩略图的方法
2015/04/02 PHP
PHP机器学习库php-ml的简单测试和使用方法
2017/07/14 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
php提供实现反射的方法和实例代码
2019/09/17 PHP
js cookies实现简单统计访问次数
2009/11/24 Javascript
23个Javascript弹出窗口特效整理
2011/02/25 Javascript
JavaScript入门之对象与JSON详解
2011/10/21 Javascript
js弹出层永远居中实现思路及代码
2013/11/29 Javascript
jquery默认校验规则整理
2014/03/24 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
2014/06/06 Javascript
jQuery制作简单柱状图实例
2015/01/28 Javascript
js生成随机数的方法实例
2015/10/16 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
2015/11/25 Javascript
浅谈JavaScript的函数及作用域
2016/12/30 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
TypeScript基础入门教程之三重斜线指令详解
2018/10/22 Javascript
Vue 实现前进刷新后退不刷新的效果
2019/06/14 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
在Python中使用异步Socket编程性能测试
2014/06/25 Python
python实现带错误处理功能的远程文件读取方法
2015/04/29 Python
Python之Scrapy爬虫框架安装及简单使用详解
2017/12/22 Python
python2和python3实现在图片上加汉字的方法
2019/08/22 Python
CSS3实现银灰色动画效果的导航菜单代码
2015/09/01 HTML / CSS
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
会计专业推荐信
2013/10/29 职场文书
婚假请假条怎么写
2014/04/10 职场文书
《狼和小羊》教学反思
2014/04/20 职场文书
节能环保家庭事迹材料
2014/08/27 职场文书
麦田里的守望者读书笔记
2015/06/30 职场文书
golang在GRPC中设置client的超时时间
2021/04/27 Golang
python 网络编程要点总结
2021/06/18 Python
Python可视化学习之seaborn调色盘
2022/02/24 Python
python三子棋游戏
2022/05/04 Python
基于Python编写一个监控CPU的应用系统
2022/06/25 Python