博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
第5章 css与背景相关的样式background
阅读量:5913 次
发布时间:2019-06-19

本文共 1737 字,大约阅读时间需要 5 分钟。

background-origin

设置元素背景图片的原始起始位置。 语法:

background-origin : border-box | padding-box | content-box;复制代码

参数分别表示背景图片是从边框,还是内边距(默认值),或者是内容区域开始显示。 效果如下:

需要注意的是,如果背景不是no-repeat,这个属性无效,它会从边框开始显示。

background-clip

用来将背景图片做适当的裁剪以适应实际需要。 语法:

background-clip : border-box | padding-box | content-box | no-clip复制代码

参数分别表示从边框、或内填充,或者内容区域向外裁剪背景。no-clip表示不裁切,和参数border-box显示同样的效果。backgroud-clip默认值为border-box。 效果如下图所示:

background-size

设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩。 语法:

background-size: auto | 
<长度值>
|
<百分比>
| cover | contain复制代码

取值说明: 1、auto:默认值,不改变背景图片的原始高度和宽度; 2、<长度值>:成对出现如200px 50px,将背景图片宽高依次设置为前面两个值,当设置一个值时,将其作为图片宽度值来等比缩放; 3、<百分比>:0%~100%之间的任何值,将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值,当设置一个值时同上; 4、cover:顾名思义为覆盖,即将背景图片等比缩放以填满整个容器; 5、contain:容纳,即将背景图片等比缩放至某一边紧贴容器边缘为止。

multiple backgrounds

多重背景,也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加,缩写时为用逗号隔开的每组值;用分解写法时,如果有多个背景图片,而其他属性只有一个(例如background-repeat只有一个),表明所有背景图片应用该属性值。 语法缩写如下: background : [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],... 可以把上面的缩写拆解成以下形式: background-image:url1,url2,...,urlN; background-repeat : repeat1,repeat2,...,repeatN; backround-position : position1,position2,...,positionN; background-size : size1,size2,...,sizeN; background-attachment : attachment1,attachment2,...,attachmentN; background-clip : clip1,clip2,...,clipN; background-origin : origin1,origin2,...,originN; background-color : color; 注意:

  1. 用逗号隔开每组 background 的缩写值;
  2. 如果有 size 值,需要紧跟 position 并且用 "/" 隔开;
  3. 如果有多个背景图片,而其他属性只有一个(例如 background-repeat 只有一个),表明所有背景图片应用该属性值。
  4. background-color 只能设置一个。

转载于:https://juejin.im/post/5c0a58a9f265da616301e0a3

你可能感兴趣的文章
Javascrpt无刷新文件上传
查看>>
JS移动客户端--触屏滑动事件 banner图效果
查看>>
由于管理员设置的策略,该磁盘处于脱机状态-Win 2008 R2
查看>>
使用注册表优化终端、编辑器的中英字体混合显示,如「Consolas + 雅黑」「Monaco + 雅黑」...
查看>>
【canvas】基础练习一 图形
查看>>
Python 中 open()文件操作的方式
查看>>
SQL Cursor 基本用法
查看>>
linux 切分文件
查看>>
英语论文中怎么正确地写计量单位
查看>>
解读ASP.NET 5 & MVC6系列(8):Session与Caching
查看>>
构造AJAX参数, 表单元素JSON相互转换
查看>>
unity, 查看资源文件类型
查看>>
2015 百度之星 1003 序列变换 二分
查看>>
顺序容器
查看>>
mysql 拒绝访问的解决办法
查看>>
Struts2中的链接标签 <s:url>和<s:a>---在action中获取jsp表单提交的参数(转)
查看>>
log4net使用特定的解释
查看>>
【转】用Device tree overlay掌控Beaglebone Black的硬件资源
查看>>
java战斗系列-战斗MAVENPW结构
查看>>
Android开发学习总结(二)——使用Android Studio搭建Android集成开发环境
查看>>