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. ABP框架源码学习之修改默认数据库表前缀或表名称

    ABP框架源码学习之修改默认数据库表前缀或表名称 1,源码 namespace Abp.Zero.EntityFramework { /// <summary> /// Extension ...

  2. Java 解压zip压缩包

    因为最近项目需要批量上传文件,而这里的批量就是将文件压缩在了一个zip包里,然后读取文件进行解析文件里的内容. 因此需要先对上传的zip包进行解压.以下直接提供代码供参考: 1.第一个方法是用于解压z ...

  3. Effective Java 之-----谨慎的覆盖clone方法

    1.概述 如果clone方法返回一个由构造器创建的对象,它就得到有错误的类.因此,如果覆盖了非final类中的clone方法,则应该返回一个通过调用super.clone得到的对象.如果类的所有超类都 ...

  4. linux下硬盘uuid查看及修改设置

    查看硬盘UUID 方法一:ls -l /dev/disk/by-uuid方法二:blkid /dev/sdb1 修改硬盘UUID: uuidgen 会返回一个合法的 uuid,结合 tune2fs 可 ...

  5. BZOJ 3028: 食物 [生成函数 隔板法 | 广义二项式定理]

    3028: 食物 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 497  Solved: 331[Submit][Status][Discuss] De ...

  6. CCF NOI plus 201(7)6 初赛题 解题报告

    GTMDCCF. 今年这题怎么评价? 去看我在知乎的回答:https://www.zhihu.com/question/66621360/answer/244222388 挨个说一遍. 单项选择题 T ...

  7. 基本的socket编程的介绍

    网络IPC:套接字 用socket实现两个不同的主机之间的通信(涉及到一些基本的计算机网络知识  略过..) 服务器端: 1.socket函数:生成一个套接字 int socket(int domai ...

  8. python基础dict,集合,文件

    字典是一种key:value的数据类型dict1{ 'stud1':'孙礼昭', 'stud2':'slz', 'stud3':'sunlizhao',}dict是无序的,key是唯一的  天生去重增 ...

  9. 聊聊Vue.js的template编译

    写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:https://github.com/a ...

  10. ASP.NET MVC5+EF6+EasyUI 后台管理系统（89）-EF执行SQL语句与存储过程

    这一节,我们来看看EF如何执行SQL语句与读取存储过程的数据,可能有一部分人,还不知道EF如何执行存储过程与原生SQL语句! 我们什么时候要直接使用原生的SQL语句? 返回值过于复杂 过于复杂的联合查 ...