CSS3 background-origin 属性
CSS3 background-origin 属性
padding-box | 背景图像相对于内边距框来定位。 |
border-box | 背景图像相对于边框盒来定位。 |
content-box | 背景图像相对于内容框来定位。 |
<style>
.back{
background:url(naicha.jpg) no-repeat;
background-size: cover;
height:150px;
width:200px;
padding: 20px;
border: 10px dashed #333;
background-origin: border-box;
margin:30px;
float:left;
} .back1{
background:url(naicha.jpg) no-repeat;
background-size: cover;
height:150px;
width:200px;
padding: 20px;
border: 10px dashed #333;
background-origin: padding-box;
margin:30px;
float:left;
} .back2{
background:url(naicha.jpg) no-repeat;
background-size: cover;
height:150px;
width:200px;
padding: 20px;
border: 10px dashed #333;
background-clip: content-box;
background-origin: content-box;
margin:30px;
float:left;
}
</style>
<div class="back"></div>
<div class="back1"></div>
<div class="back2"></div>
CSS3 background-origin 属性的更多相关文章
- CSS3 background属性
background: #00FF00 url(bgimage.gif) no-repeat fixed top; background 简写属性在一个声明中设置所有的背景属性. 可以设置如下属性: ...
- css3 background
background是一个很重要的css属性,在css3中新增了很多内容.一方面是原有属性新增了属性值,另一方面就是新增了3个属性. 一.css3中新增属性值介绍 css2的background有5个 ...
- background复合属性详解(上):background-image
background复合属性是个很复杂的属性,花样非常多,比较神奇的是css3 中支持多图片背景了,这篇文章先讲讲background-image属性,其他背景属性会在后续的文章综合总结. 一.最基本 ...
- CSS3利用text-shadow属性实现多种效果的文字样式展现
一.效过图展示: 已经是比较久之前学习的文字效果了.但是还是很实用很有趣的.利用CSS3提供的text-shadow属性可以给页面上的文字添加阴影效果,因此可以替换掉之前使用过的一些繁琐的图片.到目前 ...
- CSS3中动画属性transform、transition 和 animation
CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为改变,使 ...
- CSS3新增文本属性实现图片点击切换效果
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 半深入理解CSS3 object-position/object-fit属性
半深入理解CSS3 object-position/object-fit属性 转载:https://www.zhangxinxu.com/wordpress/2015/03/css3-object-p ...
- 利用css3的text-shadow属性实现文字阴影乳白效果
现在CSS3+html5的网页应用的越来越广泛了.很多网页中的字体同样可以用CSS3来实现炫酷的效果. 下面就介绍一下利用css3的text-shadow属性实现文字阴影乳白效果.这是在设计达人上面看 ...
- CSS3的新属性
1.圆角矩形 .border_radius_test{ border-radius:25px; -moz-border-radius:25px; } 数值越大越圆 2.容器阴影 .box_shadow ...
- css3的clip-path属性
css3的clip-path属性 网上看到的都是因为2年前一个出名的网站引发了对该属性的研究.所以大概是2年前火了一阵子的属性.2016-09-10 23:54:00 直接开始总结它的用法: 2个基 ...
随机推荐
- NOIP2011 提高组合集
NOIP 2011 提高组合集 D1 T1 铺地毯 模拟,题目让你干啥你就干啥 #include <iostream> #include <cstdio> using name ...
- P3383 【模板】线性筛素数 洛谷
https://www.luogu.org/problem/show?pid=3383#sub 题目描述 如题,给定一个范围N,你需要处理M个某数字是否为质数的询问(每个数字均在范围1-N内) 输入输 ...
- HDU——1576 A/B
A/B Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submis ...
- MVC路由中特殊URL匹配规则
*匹配*用来匹配URL剩余部分 贪婪匹配规则贪婪匹配会找到最后一个符合条件的“字面量”为止
- [Dart] Understand Variables and Constants in Dart
In this lesson, we will look at how to create variables and constants. These are containers that sto ...
- Linux内核之于红黑树and AVL树
为什么Linux早先使用AVL树而后来倾向于红黑树? 实际上这是由红黑树的有用主义特质导致的结果,本短文依旧是形而上的观点.红黑树能够直接由2-3树导出.我们能够不再提红黑树,而仅仅提2- ...
- C#之快速排序
算法描述 1.假定数组首位元素为“枢轴”,设定数列首位(begin)与末位(end)索引: 2.由末位索引对应元素与“枢轴”进行比较,如果末位索引对应元素大于“枢轴”元素,对末位索引减一(end--) ...
- Android利用Volley异步载入数据完整具体演示样例(二)
MainActivity例如以下: package cc.y; import android.app.Activity; import android.content.Context; import ...
- 一个尖括号能干什么,画一个笑脸开始(为了支持交互,它又增添了JavaScript。HTML页面也越来越臃肿。于是CSS便诞生了。API和核心代码的出现使HTML能够访问更复杂的软件功能--支持更高级的交互和云服务集成。这就是今天的HTML5)
一个尖括号 < 一个尖括号能干什么 < ? 你可以编出一顶帽子 <(:-p 或一张笑脸 :-> 再或者更直接一些 20世纪90年代初,html作为一种简单标记语言面世,用于在互 ...
- 37. ext 中sm什么意思
转自:https://zhidao.baidu.com/question/112450217.htmlsm是SelectionModel的缩写默认为RowSelectionModel其他模式还有Che ...