1、属性简介

background-clip：padding|border|content|text|!important

2、兼容性

（1）IE6、7、8不兼容

（2）火狐3.0以上兼容

（3）Chrome 2.0.x兼容

3、属性实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3之background-clip</title>
<style type="text/css">
    body{
		background-color:#FCC;
		width:60%;
		height:200px;
		font-size:24px;
		font-weight:bolder;
	}
	div{
		background:#C6F url(image.jpg);
		background-color:#9FF;
		width:100%;
		height:100%;

		-moz-background-clip:padding;
		-webkit-background-clip:padding;

		-moz-background-inline-policy: -moz-initial;

		/*
		-moz-background-clip:border;
		-webkit-background-clip:border;

		-moz-background-clip:!important;
		-webkit-background-clip:!important;

		-webkit-background-clip:content;
		-webkit-background-clip:text;*/

	}
</style>
</head>

<body>
  <div>
     CSS3之background-clip
  </div>
</body>
</html>

4、运行结果

CSS3之background-clip的更多相关文章

  1. CSS3中background属性的调整

    CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...

  2. css3 背景background

    Css3背景<background> Css3包含多个新的背景属性,它们提供了对背景更强大的控制.可以自定义背景图的大小,可以规定背景图片的定位区域,css3还允许我们为元素使用多个背景图 ...

  3. css2和CSS3的background属性简写

    1.css2:background:background-color || url("") || no-repeat || scroll || 0 0;  css3:  backg ...

  4. css3的Background新属性

    前言 CSS3中出现了几种关于背景图片的新属性:background-origin.background-clip.background-position等.之前大致了解了下,但是background ...

  5. css3创建多边形clip属性，可用来绘制不规则图形了

    .path1 { clip-path: polygon(5px 10px, 16px 3px, 16px 17px); } .path2 { clip-path: polygon(3px 5px, 1 ...

  6. CSS背景和CSS3背景background属性

    css背景属性用于定义HTML元素的背景 背景属性既可以为单个的单元设置背景,也可以为整个页面设置背景,可以对上述二者的任意组合设置背景,段落.文字.不同状态的链接.图像.内容区域修改其背景样式.设置 ...

  7. css3之background

    background background: (1)url(image1.png) right bottom, (2)url(image2.png) center, (3)url(image3.png ...

  8. [CSS3] CSS Background Images

    Body with background image and gradient html { background: linear-gradient(#000, white) no-repeat; h ...

  9. 巧用CSS3之background渐变

    常见斑马loading 上图是我们常见的loading进度条,以前都是用一张背景图片平铺的.其实如果抛去兼容性因素,我们可以用零图片纯样式来实现. 一,首先,我们先为容器定义一个纯蓝色背景: box{ ...

  10. CSS3详解：background

    CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...

随机推荐

  1. Jmeter_打印当前时间戳&打印偏移时间戳

    Jmeter中提供了一种函数,可以打印时间戳,如下图 年: yyyy 月:MM 日:dd 时: HH 分: mm 秒:ss 关于时间戳的格式,可以自由组合定义,这里我写成这样 yyyy-MM-dd H ...

  2. Effective Java 第三版——31.使用限定通配符来增加API的灵活性

    Tips <Effective Java, Third Edition>一书英文版已经出版,这本书的第二版想必很多人都读过,号称Java四大名著之一,不过第二版2009年出版,到现在已经将 ...

  3. oracle用户、权限操作

    oracle用户操作,权限操作: 1.创建用户,并让用户默认表空间为tb1: create user 用户名 identified by 密码 default namespace tb1 2.授权: ...

  4. thinkpadE470 win10安装虚拟机时出现‘intel VT-x’处于禁用状态 无法执行64位操作系统

    上图为安装虚拟机时弹出的问题. 解决办法: 本人电脑型号为thinkpadE470.遇到此问题查阅了很多,都是针对一般电脑的.折腾了好一会儿.故特写一篇针对此型号的. 1.重启计算机,一开始出现联想标 ...

  5. Linux系统zookeeper环境搭建（单机、伪分布式、分布式）

    本人现在对zookeeper的环境搭建做一个总结,一般zookeeper的安装部署可以有三种模式,单机模式.伪分布式和分布式,这三种模式在什么时候应用具体看大家的使用场景,如果你只有一台机器且只是想自 ...

  6. 洛谷 [P2762] 太空飞行计划问题

    最大权闭合子图 胡伯涛论文真是个好东西.jpg 求一个有向图的最大权闭合子图,常应用于有先决条件的最优化问题中 将所有正权点与源点相连,容量为点权; 将所有负权点与汇点相连,容量为点权的相反数; 将原 ...

  7. 洛谷 [P1118] IOI1994 数字三角形

    简单dfs 我们注意到,题目中的运算方式与杨辉三角极其相似,所以说本题实际上是一道加权的杨辉三角,搜索系数 #include <iostream> #include <cstdio& ...

  8. BZOJ 2111: [ZJOI2010]Perm 排列计数 [Lucas定理]

    2111: [ZJOI2010]Perm 排列计数 Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 1936  Solved: 477[Submit][ ...

  9. iOS图片轮播

    基于ScrollView的图片播放 ScrollView的方法 NSTime的循环 UIPageControl的运用 委托方法 基于iphone5 未做屏幕的适配 import "ViewC ...

  10. yum出问题啦

    BUG 不小心把/usr/local上的一堆文件(夹)给删除了,于是乎,一堆问题冒出来了 loading mirror speeds from cached hostfile 解决方法 一定要执行 y ...