css3之背景background-origin,background-clip,background-size
background-origin属性指定了背景图像的位置区域。
content-box, padding-box,和 border-box区域内可以放置背景图像。
background-clip用来将背景图片做适当的裁剪以适应实际需要。
效果
background-size 指定背景图像的大小:
语法:
background-size: auto | <长度值> | <百分比> | cover | contain
1、auto:默认值,不改变背景图片的原始高度和宽度;
2、<长度值>:成对出现如200px 50px,将背景图片宽高依次设置为前面两个值,当设置一个值时,将其作为图片宽度值来等比缩放;
3、<百分比>:0%~100%之间的任何值,将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值,当设置一个值时同上;
4、cover:顾名思义为覆盖,即将背景图片等比缩放以填满整个容器;
5、contain:容纳,即将背景图片等比缩放至某一边紧贴容器边缘为止。
css3之背景background-origin,background-clip,background-size的更多相关文章
- CSS3的背景background
CSS3中的Background属性 background: background-image || background-position/background-size || background ...
- css3-background clip 和background origin
1.background-origin background-origin 里面有3个参数 : border-box | padding-box | content-box; border-box,p ...
- CSS3实现背景颜色渐变
CSS3渐变色生成网站:http://gradients.glrzad.com/ 本文参考:前端设计之用CSS3做线性渐变效果http://webskys.com/css3/10.html 在CSS3 ...
- CSS3之背景剪裁Background-clip
CSS3之背景剪裁Background-clip是CSS3中新添加的内容.这个属性还是比较简单的,主要分五个属性值:border.padding.content.no-clip和text.下面将针对这 ...
- CSS3之背景定位原点background-origin
背景定位原点background-origin是CSS3新添加的有关背景的属性,主要是改变背景起始的原点位置的.CSS3之背景定位原点background-origin的属性值有三个:border.p ...
- 移动开发之css3实现背景几种渐变效果
移动端背景渐变,非常的年轻,符合90后年轻一代的审美,css3的这个渐变目前主要是应用在手机前端领域. 产品设计中使用渐变色的好处:1:观众不至于眼睛过于疲劳(如果是浅色背景,3个小时下来极容易造成观 ...
- 基于CSS3动态背景登录框代码
基于CSS3动态背景登录框代码.这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
- CSS3透明背景+渐变样式
CSS3透明背景+渐变样式 转载自博文:<CSS3透明背景+渐变样式> http://blog.csdn.net/netbug_nb/article/details/44343809 效果 ...
- css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变
css3的渐变可以使用2个或者多个指定的颜色之间显示平稳的过渡的效果.这篇文章主要介绍下css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变的方法,以便大家学习参考! 1.css背景颜色渐变 代码: ...
- 全屏背景图的实现及background的相关属性
今天需要做一个占满设备宽度的轮播图,这里作为demo仅展示一张图,下面分别是要操作的图片(这里做了缩放处理,实际的图比较大),以及要实现的效果图,很明显两者是不成比例的: (图一) ...
随机推荐
- jpa 踩坑 SQLGrammarException
SQLGrammarException could not execute query cause by not found column id ,, id指的是,返回的结果没有Id 封装结果集出错 ...
- 如何设置树莓派 VNC 的分辨率
当我们使用 VNC 连接到树莓派时,默认的分辨率非常低.甚至无法显示整个桌面,因此我们需要对分辨率进行设置.在树莓派上设置 VNC 的分辨率很简单,在终端运行下面指令进入设置界面设置. 1 sudo ...
- AIO 详解
AIO(Asynchronous Input and Output) 异步IO则采用"订阅-通知"模式: 即应用程序向操作系统注册IO监听,然后继续做自己的事情. 当操作系统发生I ...
- Linux g++
Usage: g++ [options] file...Options: -pass-exit-codes Exit with highest error code from a p ...
- luoguP1029 最大公约数和最小公倍数问题 [gcd][数论]
题目描述 输入二个正整数x0,y0(2<=x0<100000,2<=y0<=1000000),求出满足下列条件的P,Q的个数 条件: 1.P,Q是正整数 2.要求P,Q以x0为 ...
- go包flag系统包简单使用
一.代码 package main import ( "flag" "fmt" ) //定义命令行参数,这个mode是内存地址,参数1是命令行名称,参数2是命令 ...
- Seam科普
声明:这是引用的,具体引用位置在最下面. 只供个人学习,免得忘记了又要到处找,十分感谢原作作者.如果有什么问题请联系我. Seam框架开发一个HelloWrld的例子. Seam本身,而在于Seam使 ...
- Linux unzip解压多个文件
假设当前目录下有多个zip文件 data.zip invoices.zip pictures.zip visit.zip, 直接 unzip *.zip 等价于 unzip data.zip invo ...
- mavlink 笔记1
Packet Anatomy This is the anatomy of one packet. It is inspired by the CAN and SAE AS-4 standards. ...
- 数据可视化(matplotilb)
一,matplotilb库(数学绘图库) mat数学 plot绘图 lib库 matplotlib.pyplot(缩写mp)->python 最常用接口 mp.plot(水平坐标,垂直坐标数组 ...