您现在的位置是：网站首页> 编程资料编程资料

CSS3对背景图片的裁剪及尺寸和位置的设定方法CSS3实现的全屏背景图片缩小渐变切换效果源码CSS的background属性及CSS3的背景图片设置总结jQuery+CSS3实现鼠标点击背景图片向上拉伸切换特效源码jquery+css3实现的网页背景图片固定内容切换特效源码多重CSS背景动画实现方法示例css实现的鼠标悬停360度背景图片做动画旋转效果css3实现背景图片拉伸效果像桌面壁纸一样css3背景图片透明叠加属性cross-fade简介及用法实例

2021-09-05 1009人已围观

简介 这篇文章主要介绍了CSS3对背景图片的裁剪及尺寸和位置的设定方法,在IE浏览器中要注意一下兼容性,需要的朋友可以参考下

背景裁剪

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-提示： 本文由神整理自网络，如有侵权请联系本站删除！
    本站声明：
    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

    上一篇：用CSS3的box-reflect设置文字倒影效果的方法讲解CSS3制作文字半透明倒影效果的两种实现方式CSS图片倒影效果兼容firefox、IE等各主流浏览器Css3实现带倒影的3D图片走廊的效果代码

    下一篇：CSS的Sass框架中常用的操作符的使用教程CSS框架sass的简单一览CSS的SASS样式编程指南学习CSS预处理器:Sass和less进行对比sass(scss）的安装与使用教程

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网