html中background标签作用,CSS Background 属性详解
Background
background属性的简写用法, 常见背景属性的理解。
目录
background属性的简写用法
常见背景属性介绍
神奇的渐变色
background属性
background简写属性在一个声明中可设置所有的背景属性。
可设置属性如下:
background-image: 设置背景图像, 可以是真实的图片路径, 也可以是创建的渐变背景;
background-position: 设置背景图像的位置;
background-size: 设置背景图像的大小;
background-repeat: 指定背景图像的铺排方式;
background-attachment: 指定背景图像是滚动还是固定;
background-origin: 设置背景图像显示的原点[background-position相对定位的原点];
background-clip: 设置背景图像向外剪裁的区域;
background-color: 指定背景颜色。
简写的顺序如下: bg-color || bg-image || bg-position [ / bg-size]? || bg-repeat || bg-attachment || bg-origin || bg-clip
顺序并非固定, 但是要注意:
background-position 和 background-size 属性, 之间需使用/分隔, 且position值在前, size值在后。
如果同时使用 background-origin 和 background-clip 属性, origin属性值需在clip属性值之前, 如果origin与clip属性值相同, 则可只设置一个值。
代码示例: background: url("image.png") 10px 20px/100px no-repeat content-box;
复制代码
background是一个复合属性, 可设置多组属性, 每组属性间使用逗号分隔, 其中背景颜色不能设置多个且只能放在最后一组。
如设置的多组属性背景图像之间存在重叠, 则前面的背景图像会覆盖在后面的背景图像上。
代码示例: padding: 10px;
background: url("image.png") 0% 0%/60px 60px no-repeat padding-box,
url("image.png") 40px 10px/110px 110px no-repeat content-box,
url("image.png") 140px 40px/200px 100px no-repeat content-box #58a;
复制代码
效果图如下:
常见背景属性
background-position
background-position属性用来设置背景图像的位置, 默认值: 0% 0%, 效果等同于 left top。
取值说明:
如果设置一个值, 则该值作用在横坐标上, 纵坐标默认为50%(即center) ;
如果设置两个值, 则第一个值作用于横坐标, 第二个值作用于纵坐标, 取值可以是方位关键字[left\top\center\right\bottom], 如 background-position: left center ; 也可以是百分比或长度, 百分比和长度可为设置为负值, 如: background-position: 10% 30px ;
另外css3支持3个值或者4个值, 注意如果设置3个或4个值, 偏移量前必须有关键字, 如: background-position: right 20px bottom 30px;
示例图如下:
也可以使用 background-position-x 或 background-position-y 来分别设置横坐标或纵坐标的偏移量。
注意: 当使用 background-position-x 以及 background-position-y 时, 需考虑Firefox兼容性的问题。
background-size
background-size 属性用来指定背景图像的大小。默认值: auto
取值说明: 1. 可使用 长度值 或 百分比 指定背景图像的大小, 值不能为负值。如果设置一个值, 则该值用于定义图像的宽度, 图像的高度为默认值 auto, 根据宽度进行等比例缩放; 如果设置两个值, 则分别作用于图像的宽和高。 2. auto 默认值, 即图像真实大小。 3. cover 将背景图像等比缩放到完全覆盖容器, 背景图像有可能超出容器。(即当较短的边等于容器的边时, 停止缩放) 4. contain 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,
背景图像始终被包含在容器内。(即当较长的边等于容器的边时, 停止缩放)
示例图如下(图片: 宽640px 高448px, 容器: 宽200px 高200px):
background-repeat
background-repeat 属性用来设置背景图像铺排填充方式, 默认值: repeat 。
取值说明: 1. repeat-x 表示横向上平铺, 相当于设置两个值 repeat no-reapeat; 2. repeat-y 表示纵向上平铺, 相当于设置两个值 no-repeat repeat; 3. repeat 表示横向纵向上均平铺; 4. no-repeat 表示不平铺; 5. round 表示背景图像自动缩放直到适应且填充满整个容器。 注意: 当设置为 round 时, background-size
的 cover 和 contain 属性失效。 6. space 表示背景图像以相同的间距平铺且填充满整个容器或某个方向. 注意: 当 background-size 设置为 cover 和 contain 时, background-rapeat 的 space 属性失效。
注意, background-repeat 的 round/space 属性, 部分Firefox版本不支持。
示例图:
background-origin
用于设置 background-position 定位时参考的原点, 默认值 padding-box , 另外还有两个值: border-box 和 content-box。
代码示例: border: 10px solid #58A;
padding: 20px;
background-position: 10px 20px;
复制代码
示例图:
background-clip
用于指定背景图像向外裁剪的区域, 默认值 border-box , 另外还有两个值: padding-box 和 content-box。
注意: 由于 background-origin 的默认值为 padding-box, 即背景图像 background-image 的默认定位 background-position 参考的原点为 padding区域是[包含padding], 所以为了更好的了解 background-clip 几个属性值的特性, 可将 background-origin 设置为 border-box 。
代码示例: background-color: #58a;
background-image: url("image.png");
background-repeat: no-repeat;
background-size: 120px 100px;
border: 10px dashed #fb3;
padding: 30px;
background-origin: border-box;
复制代码
示例图:
html中background标签作用,CSS Background 属性详解相关推荐
- php中的文字排版问题,CSS布局中常用的文字排版相关属性详解
本篇文章给大家带来的内容是关于CSS布局中常用的文字排版相关属性详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. CSS布局中常用的文字排版相关属性详解 一.设定文字字体.颜色.大 ...
- CSS margin属性详解
CSS margin属性详解 我发现当我想写好一篇博文的时候,希望以后能有人看到,会对别人也有一定的帮助,这时候对于其中的内容就变得深思熟虑起来,让自己查阅尽可能多的资料,这样的方式正好可以弥补我某些 ...
- HTML embed标签使用方法和属性详解
HTML embed标签使用方法和属性详解 一.基本语法 代码如下: embed src=url 说明:embed可以用来插入各种多媒体,格式可以是 Midi.Wav.AIFF.AU.MP3等等,Ne ...
- css background-attachment属性详解
css background-attachment属性详解 background-attachment属性用途 background-attachment属性用于设置背景图片定位的参照方式 backg ...
- java rollback_Spring中的@Transactional(rollbackFor = Exception.class)属性详解
序言 今天我在写代码的时候,看到了.一个注解@Transactional(rollbackFor = Exception.class),今天就和大家分享一下,这个注解的用法: 异常 如下图所示,我们都 ...
- 零基础学习CSS---05.CSS背景属性详解
CSS属性 一.背景属性 1.background-color(背景颜色):red: 2.background-image(背景图片):background-image:url(图片地址); 3.ba ...
- android中接口的作用是什么意思,详解Android接口Interface的使用和意义
本文介绍是Android的一个重要的东西,接口Interface,详解两个方面: (1)Java是继承的,接口Interface是可以多个的,恰恰弥补了这个缺点. (2)回调,接口Interface里 ...
- html float作用,CSS float相关详解
float属性是CSS常用的一个属性,应用场景广泛,同时也是一个难点,涉及到一些相关细节及注意点.因此,就特别整理总结一下. 一.float介绍 float元素也称为浮动元素,设置了float属性的元 ...
- css white-space属性详解
white-space空格处理 css white-space这个css样式,用来设置element元素对内容中的空格的处理方式,有着几个可选值:normal,nowrap,pre,pre-wrap, ...
- html whitespace属性,css white-space属性详解
white-space属性表 white-space属性 源码空格 源码换行 换行 容器边界换行 normal 合并 忽略 换行 换行 nowrap 合并 忽略 换行 不换行 pre 保留 换行 换行 ...
最新文章
- Java四种输出语句
- 巧用Linux命令完成统计排序功能yes2
- 经典C/C++面试题
- 《Effective Java》 第一讲:创建和销毁对象
- 哪两种遍历方式可以唯一确定一棵二叉树,结合力扣105题
- 数学图形(1.34) peut aussi曲线
- 菜鸟系列之C/C++经典试题(七)
- Machine Learning——Homework1
- 重磅!阿里自研RISC-V处理器玄铁910成功运行安卓10,相关代码开源
- SSM、SSH框架原理
- VMware Cloud Director Availability 4.3 下载 | 灾难恢复和迁移 | DRaaS
- python数据挖掘实验报告_Python数据挖掘实践—决策树
- python 地震数据可视化
- 小波变换matlab程序,图像小波变换原理_图像小波变换的matlab实现详解
- Hybrid App 开发快速指南
- 安装gooreplacer插件为含有googlefonts api的网页提速
- AndroidStudio之Git提交代码出现author ‘xxx‘ is not ‘Name ‘ and matches no existing author 的解决方法
- python flappy bird游戏
- 如何提高自己的归纳总结能力?
- adb常用命令以及使用
热门文章
- deepin设置快捷键
- HP ProLiant DL380 Gen9 SPP更新固件的两种方式
- rover教程_为什么NA​​SA开源Rover
- 【转】基于gamebryo引擎开发过程中组件的应用和取舍 By 宋晓宇
- 本地音乐如何导入apple_如何将自己的音乐添加到Apple Music
- c++20中的span
- H3C S3600 交换机NTP对等体模式的配置
- 阿里数据科学家一次讲透数据中台,15页PPT精华,速转走!
- 高级java人员都用过的17个jvm参数
- 如何在zencart里实现多标签标签云效果