background-clip

用来将背景图片做适当的裁剪以适应实际需要。

语法：

background-clip ： border-box | padding-box | content-box | no-clip

参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。

效果如下图所示：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>背景裁切</title>

<style type="text/css">

.wrap {

    width:220px;

    border:20px dashed #000;

    padding:20px;

    font-weight:bold;

    color:#000;

    background:#ccc url(http://static.mukewang.com/static/img/logo_index.png) no-repeat;

    background-origin: border-box;

    background-clip: content-box;

    position: relative;

}

.wrap span {

    position: absolute;

    left:0;

    top:0;

}

.content {

    height:80px;

    border:1px solid #333;

}

</style>

</head>

<body>

<div class="wrap"><span>padding</span>

    <div class="content">content</div>

</div>

</body>

</html>

background-clip 背景图片做适当的裁剪的更多相关文章

  1. background: url 背景图片加时间戳不显示图片

    在项目中一段这样的代码 背景图片加时间戳图片显示不出来 <div id="header" class="header clearfix" style=&q ...

  2. vue上线后，背景图片路径错误

    build 下的utils.js中添加配置 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, public ...

  3. HTML BODY 背景图片

    内嵌: background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/ background:url(背景图片路径)  no-repeat center;/*不重复背景 ...

  4. background的属性和背景图片定位的实例

    本文内容: 1.背景图片定位示例 2.background常用的属性值 3.background-repeat新增的round.space属性 4.background-size的属性值(着重介绍co ...

  5. background 的一些 小的细节: 1, 背景色覆盖范围: border+ width+ padding ;背景图覆盖范围: width + padding ; 2设置多个背景图片 ; 3) background-position定位百分比的计算方式: 4)background-clip 和 background-origin 的区别

    1. background (background-color, background-image)  背景色覆盖范围: border+ width+ padding ;背景图覆盖范围: width ...

  6. 背景图片之background的用法

    常用的background背景属性有: background-color 设置颜色作为对象背景颜色background-image 设置图片作为背景图片background-repeat 设置背景平铺 ...

  7. Qt 制作透明背景图片与裁剪图片（很实用）

    这两天想做一个五子棋游戏,想从零开始自己绘制各种图片素材,将经验心得整理如下. 制作透明背景图片: void MyPainter::DrawKit() { QImage image(30, 30, Q ...

  8. CSS3背景图片（多重背景、起始位置、裁剪、尺寸）

    一.多重背景图片 ①CSS3允许我们在一个元素上添加多个图片 ②多重背景可以把多个图片资源添加到background属性上,用逗号隔开,然后用background-position把他们定位到你想要的 ...

  9. 解决android:background背景图片被拉伸问题

    ImageView中XML属性src和background的区别: background会根据ImageView组件给定的长宽进行拉伸,而src就存放的是原图的大小,不会进行拉伸.src是图片内容(前 ...

随机推荐

  1. 基于HTML5 SVG炫酷文字爆炸特效

    这是一款使用html5 svg.css3和js制作的炫酷文字爆炸特效.该文字特效用SVG path属性将文字路径切割为很多小块,然后使用css3和js在鼠标滑过文字时制作文字爆炸分裂的炫酷效果. 在线 ...

  2. iOS “请在微信客户端打开链接” UIWebview加载H5页面携带session、cookie、User-Agent信息 设置cookie、清除cookie、设置User-Agent

    公司新开的一个项目..内容基本上是加载H5页面显示..当时觉得挺简单的..后来发现自己掉坑里了..一些心理历程就不说了..说这个项目主要用到的知识点吧..也是自己踩得坑. 首先说说..这个项目上的内容 ...

  3. Mac上安装Tomcat服务器

    1.下载Tomcat安装包,下载地址:http://tomcat.apache.org/ 选择你想要的版本,在这里我选择下载Tomcat 8 ps:你也可以使用axel多线程下载命令下载 下载的速度很 ...

  4. C#中的预处理器指令详解

    这篇文章主要介绍了C#中的预处理器指令详解,本文讲解了#define 和 #undef.#if.#elif.#else和#endif.#warning和#error.#region和#endregio ...

  5. Inversions

    There are N integers (1<=N<=65537) A1, A2,.. AN (0<=Ai<=10^9). You need to find amount o ...

  6. JAVA备忘录

    本文主要是记录一下JAVA: 1.Arrays.的几个用法: fill:数组全部置一个数 sort:排序 binarySearch:二分查找 2.Map的用法: Map<Integer,Inte ...

  7. 精益求精， ePub 电子书制作手记

    什么是 ePub ePub 是 Electronic Publication 的缩写,意为电子出版,是一个自由的开放标准,属于一种可以“自动重新编排”的内容,也就是文字内容可以根据阅读设备的特性,以最 ...

  8. Python之时间统计

    1. import time start_time = time.time() print('time %ds'%(time.time() - start_time))

  9. 简洁的drag效果，自由拖拽div的实现及注意点

    偶然间看到了以前做的一个简洁的div拖拽效果,修改了一下加点注释,经测试完美通过firefox/chrome/ie6-11,现拿来分享一下. 先说一下实现原理及要点,最主要的有三步.第一步是mouse ...

  10. 支持多浏览器的镜像反转css效果

    今天接到一个需求,通过一张图片得到其镜像对称的图片.本来说是后台处理的,但这样除了技术上难实现之外,还带来了资源消耗的问题,相当于每张图都要存储一个副本了. 只记得以前用过css的滤镜可以实现这个,但 ...