程序员之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > css3 >

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

Web前端实验室   发布时间：2016-03-07 11:32:27   作者：佚名   我要评论
这篇文章主要介绍了CSS3对背景图片的裁剪及尺寸和位置的设定方法,在IE浏览器中要注意一下兼容性,需要的朋友可以参考下
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）

（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）

背景裁剪

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

相关文章

  • css3实现背景图片颜色修改的多种方式

    这篇文章主要介绍了css3实现背景图片颜色修改的多种方式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起
    2021-04-13

  • CSS3 菱形拼图实现只旋转div 背景图片不旋转功能

    这篇文章主要介绍了CSS3 菱形拼图实现只旋转div 背景图片不旋转功能,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-03-29

  • CSS3只让背景图片旋转180度的实现示例

    这篇文章主要介绍了CSS3只让背景图片旋转180度的实现示例。文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一
    2021-03-09

  • css3给背景图片加颜色遮罩的方法

    前段时间在开发中，遇到需要给背景层加颜色遮罩的项目，现在特定总结一下给背景图层加颜色遮罩的方法，感兴趣的朋友跟随小编一起看看吧
    2019-11-05

  • css3实现一个div设置多张背景图片及background-image属性实例演示

    这篇文章主要介绍了css3实现一个div设置多张背景图片及background-image属性,同时对于css3背景渐变也做了详细的解释,水平渐变,左上角渐变等等方式,需要的朋友可以参考下
    2017-08-10

  • CSS的background属性及CSS3的背景图片设置总结

    这篇文章主要介绍了CSS的background属性及CSS3的背景图片设置总结,背景图片的显示区域和定位是非常值得注意的地方,需要的朋友可以参考下
    2016-06-13

  • 多重CSS背景动画实现方法示例

    CSS背景动画很长时间以来都是一个热门话题，很多时候都是因为效果特别绚丽，而且不需要额外的技术。最近有人问我是否可以给页面上一个指定的元素安排多重背景动画，答案是y
    2014-04-04

  • css3实现背景图片拉伸效果像桌面壁纸一样

    使用css3 属性：background-size可以轻松实现像桌面壁纸一样拉伸，下面为大家详细介绍下具体的相关实现过程，有此需求的朋友可以参考下，希望对大家有所帮助
    2013-08-19

  • css3背景图片透明叠加属性cross-fade简介及用法实例

    据说iOS6系统(iPhone5)增加了两个CSS3属性，一个是CSS3 filters – CSS3滤镜另外一个是CSS3 Cross-fade – CSS3交叉淡入淡出,接下来为您介绍cross-fade属性，感兴趣的朋友
    2013-01-08

  • CSS3系列教程:背景图片(背景大小和多背景图) 应用说明

    背景图片/纹理有很多种使用方式，常常用于为添加网站的最佳的界面美化。现在它在CSS3中被重视，我们可以应用多背景图和背景图片尺寸来实现更完美的效果,需要的朋友可以了解
    2012-12-19

最新评论

关注微信公众号

扫一扫
?


http://www.vxiaotou.com