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. hash_map map

    什么时候需要用hash_map,什么时候需要用map? 总体来说,hash_map 查找速度会比map快,而且查找速度基本和数据数据量大小,属于常数级别;而map的查找速度是log(n)级别.并不一定 ...

  2. POJ1651:Multiplication Puzzle(区间DP)

    Description The multiplication puzzle is played with a row of cards, each containing a single positi ...

  3. Android 高级UI设计笔记22：Android 指示引导页（带圆点）

    1. 引导页: 我们在安装某个软件首次运行时,大部分都会有一个引导页的提示,介绍软件新功能的加入或者使用说明等,支持滑动且下面会有几个圆点,显示共有多少页和当前图片的位置,类似如下效果: 2. 引导页 ...

  4. 【Mood-4】心静是一门艺术

    到现在工作还没有着落,心里面反而比以前平静,以前也知道自己的水平 属于一瓶不满,半瓶咣当的那种情况,但是那时候的自己总是觉得自己的综合水平可能会弥补一下自己在技术上的缺失,但是,现在看来,太过于自信, ...

  5. 个人总结ANDROID开发事项

    theme:none,Holo Dark(全黑),Holo Light(全白),Holo Light width Dark action Bar(全白,活动栏是黑) Create Activity: ...

  6. 0. SQL Server监控清单

    数据库服务器的监控可大致分为两类: (1) 状态监控:数据库服务器有没有在健康地运行? (2) 性能监控:健康运行的同时,有没有性能问题?可不可以更快些? 一. 服务器 1. 状态监控 (1) 服务器 ...

  7. Centos7.5 搭建Red5视频直播服务器

    一.安装java环境 yum install java-1.7.0-openjdk 详细步骤请参考 http://www.cnblogs.com/java-qzq/p/5845509.html 我的这 ...

  8. 跨越跳板机传文件nc

    从线上服务器与本机互传文件 传输方 nc -l 10000 < a.tar 接收方 nc xx.xx.xx.xx 10000 >a.tar 原理: 文件传输方运行nc,指定端口,设置监听文 ...

  9. python 基础——变量

    变量赋值 1. 把任意类型的变量[名称]赋值给新的变量,总是增加对象引用,而不是创建新的对象 2. 对于list.dict可变类型,操作的都是同一个对象 3. 使用del删除的是该对象的一个引用,只有 ...

  10. LeetCode 287

    Find the Duplicate Number Given an array nums containing n + 1 integers where each integer is betwee ...