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是图片内容(前 ...
随机推荐
- Java_Hbase优化
1.datanode的最大文件数 vi $HADOOP_HOME/conf/hdfs-site.xml <property> <name>dfs.datanode.max.xc ...
- The LMAX disruptor Architecture--转载
原文地址: LMAX is a new retail financial trading platform. As a result it has to process many trades wit ...
- 类的__slots__属性
为什么有"slots"属性? 默认情况下,python对象队象的每个实例(instance)都会有一个字典来存储该实例的属性,这样做的好处在于运行时期每个对象可以任意设置新的属性. ...
- 客户端动态化系列之——Weex
来源:kuailejim 链接:http://www.jianshu.com/p/ea25fd834944 客户端动态化系列之--URLRoute 在前端越来越火的年代,逐渐衍生出类似React Na ...
- GCT考试如何准备
备战考试篇 回首连续的3个月的那段复习过程,感受颇多颇深!以下就各科复习,我谈谈自己的感受和经验: 语文复习: 语文主要是考察你的文学功底和素养以及已经具备的工作生活的常识.从03,04两年的考试真题 ...
- Android（java）学习笔记64：线程的控制
1. 线程休眠: Java中线程休眠指让正在运行的线程暂停执行一段时间,进入阻塞状态,通过调用Thread类的静态方法sleep得以实现. 当线程调用sleep进入阻塞状态后,在其休眠的时间内,该线程 ...
- 沈逸老师PHP魔鬼特训笔记（1）
此课程个人开发环境可以考虑使用Ubuntu ,推荐sublime和PhpStorm作为开发环境.一.PHP的一大特性是:脚本语言.不要编译,写完就可以运行? 然而并不是....... PHP代码要想运 ...
- 接入淘宝API（PHP版本）
本文链接! http://www.cnblogs.com/MicroHao/p/4030117.html 遇到的问题一: $req = new WaimaiOrderIndexGetRequest; ...
- XML基础概念
XML基础概念 一.什么是XML. 可扩展标记语言(EXtensible Markup Language),标准通用标记语言的子集,是一种用于标记电子文件使其具有结构性的标记语言. 二.XML特点 1 ...
- hdu 4411 最小费用流
思路:主要就是要把一个每个城市拆为两个点,建一条容量为1,费用为-inf的边,保证每个城市都会被遍历. /*最小费用最大流*/ #include<iostream> #include< ...