background-clip 背景图片做适当的裁剪
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 背景图片做适当的裁剪的更多相关文章
- background: url 背景图片加时间戳不显示图片
在项目中一段这样的代码 背景图片加时间戳图片显示不出来 <div id="header" class="header clearfix" style=&q ...
- vue上线后，背景图片路径错误
build 下的utils.js中添加配置 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, public ...
- HTML BODY 背景图片
内嵌: background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/ background:url(背景图片路径) no-repeat center;/*不重复背景 ...
- background的属性和背景图片定位的实例
本文内容: 1.背景图片定位示例 2.background常用的属性值 3.background-repeat新增的round.space属性 4.background-size的属性值(着重介绍co ...
- 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 ...
- 背景图片之background的用法
常用的background背景属性有: background-color 设置颜色作为对象背景颜色background-image 设置图片作为背景图片background-repeat 设置背景平铺 ...
- Qt 制作透明背景图片与裁剪图片（很实用）
这两天想做一个五子棋游戏,想从零开始自己绘制各种图片素材,将经验心得整理如下. 制作透明背景图片: void MyPainter::DrawKit() { QImage image(30, 30, Q ...
- CSS3背景图片（多重背景、起始位置、裁剪、尺寸）
一.多重背景图片 ①CSS3允许我们在一个元素上添加多个图片 ②多重背景可以把多个图片资源添加到background属性上,用逗号隔开,然后用background-position把他们定位到你想要的 ...
- 解决android:background背景图片被拉伸问题
ImageView中XML属性src和background的区别: background会根据ImageView组件给定的长宽进行拉伸,而src就存放的是原图的大小,不会进行拉伸.src是图片内容(前 ...
随机推荐
- memmove和memcpy
1.memmove 函数原型:void *memmove(void *dest, const void *source, size_t count) 返回值说明:返回指向dest的void *指针 参 ...
- Linux中/usr与/var目录详解
/usr文件系统 /usr 文件系统经常很大,因为所有程序安装在这里. /usr 里的所有文件一般来自Linux distribution:本地安装的程序和其他东西在/usr/local 下.这样可能 ...
- LeetCode23 Merge k Sorted Lists
题意: Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complexit ...
- K - Ancient Messages(dfs求联通块)
K - Ancient Messages Time Limit:3000MS Memory Limit:0KB 64bit IO Format:%lld & %llu Subm ...
- ListView的addAll方法
add是将传入的参数作为当前List中的一个Item存储,即使你传入一个List也只会另当前的List增加1个元素addAll是传入一个List,将此List中的所有元素加入到当前List中,也就是当 ...
- 【阿里云产品公测】简单日志服务SLS使用评测 + 教程
[阿里云产品公测]简单日志服务SLS使用评测 + 教程 评测介绍 被测产品: 简单日志服务SLS 评测环境: 阿里云基础ECS x2(1核, 512M, 1M) 操作系统: CentOS 6.5 x6 ...
- C语言中的命名空间
C语言中的命名空间 命名空间是为了解决 "在相同作用域内如何区分 相同的标识符". 说明: ①只有在相同作用域的情况下才能使用到命名空间去区分标识符,在嵌套的作用域.不同的作用域区 ...
- mysql 中浮点型与定点型记录
为了能够引起大家的重视,在介绍浮点数与定点数以前先让大家看一个例子: mysql> CREATE TABLE test (c1 float(10,2),c2 decimal(10,2)); Qu ...
- PHP使用外部命令导出数据库，备份到服务器并下载到本地
<?php // $dumpFileName目录要有可写权限 $DbHost = 'localhost'; $DbUser = 'root'; $DbPwd = '123456'; $DbNam ...
- 你有没有试过“闭上眼”使用：京东、滴滴、QQ、支付宝？
正在看这篇文章的同学,也许是幸运的. 互联网的发展,让我们的生活越来越便利,但这个“我们”,也许并不包括那些残障人士.正常人眼里来说再简单不过的页面操作,对于盲人来说都是不可攀越的高墙.换句话说,越行 ...