background-clip 背景图片做适当的裁剪
2024-10-19 09:00:36
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>
最新文章
- JS生成随机字符串
- python中协程
- Asp.NET利用ClientScript.RegisterStartupScript(";";)的同学,请注意!
- C++与零值比较
- 异步CTP(Async CTP)为什么那样工作?
- nodejs字符与字节之间的转换
- JAVA 综合布局应用
- mysql中实现oracle中的rowid功能
- PDF编辑、删除、替换某页面或文字
- 2、Android应用程序基本特性
- sublime中文乱码解决办法
- AngularJS - 基本功能介绍
- UIViewController 之 边框类型
- SQL*Plus快速入门
- Unity 游戏框架搭建 (六) 关于框架的一些好文和一些思考
- redis下载安装以及添加服务
- 关于jquery日期控件及时间格式转换2017.05.27
- Go-Ethereum 1.7.2 结合 Mist 0.9.2 实现众筹合约的实例
- js点击什么显示什么的内容,隐藏其它和进度条
- dns安全 涉及 术语