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. Go笔记-结构、类型、常量

    [类型] 1.可以包含数据的变量(或常量),可以使用不同的数据类型或类型来保存数据.使用 var 声明的变量的值会自动初始化为该类型的零值.类型定义了某个变量的值的集合与可对其进行操作的集合.   2 ...

  2. srs2录制flv文件metadata不准确

    测试环境:server:srs2client:librestreaming / yasea srs 配置 dvr录制24分钟flv文件. e:\flv $ ll total drwxr-xr-x Ad ...

  3. bzoj 4822: [Cqoi2017]老C的任务

    4822: [Cqoi2017]老C的任务 练手速... #include <iostream> #include <cstdio> #include <cstring& ...

  4. Vue的生命周期

    1.1.实例生命周期 每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如需要设置数据监听.编译模板.挂载实例到 DOM.在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周 ...

  5. Halcon一日一练：图像分辨率与像素

    1.图像像素: 像素是指由图像的小方格即所谓的像素(pixel)组成的,这些小方块都有一个明确的位置和被分配的色彩数值,而这些一小方格的颜色和位置就决定该图像所呈现出来的样子.像素是构成图像的基本单元 ...

  6. Date和long类型互转

    1.java.util.Date类型转换成long类型 java.util.Date dt = new Date(); System.out.println(dt.toString()); //jav ...

  7. WPF: 深入理解 Weak Event 模型

    在之前写的一篇文章(XAML: 自定义控件中事件处理的最佳实践)中,我们曾提到了在 .NET 中如果事件没有反注册,将会引起内存泄露.这主要是因为当事件源会对事件监听者产生一个强引用,导致事件监听者无 ...

  8. Netty基础点滴

    编写一个应答服务器 编写一个应答服务器 写一个Netty服务器主要由两部分组成: 配置服务器功能,如线程.端口 实现服务器处理程序,它包含业务逻辑,决定当有一个请求连接或接收数据时该做什么 启动服务器 ...

  9. 集合的综合练习：Poker牌

    /* 刘意教程示例:*/ package cn.onecool.cot; import java.util.ArrayList; import java.util.Collections; impor ...

  10. LVS的DR设置测试

    dir: ipvsadm -C 清空之前ipvsadm   iptables -t nat -F 防火墙规则清空v   rs1,rs2: vi /etc/sysconfig/network-scrip ...