html中背景简写,css中background简写属性

在CSS2.1里，background属性的简写方式包含五种属性值，从CSS3开始，又增加了3个新的属性值，加起来一共8个。

CSS2.1

background-color使用的背景颜色。

background-image使用的背景图像。

background-repeat如何重复背景图像。

background-attachment背景图像是否固定或者随着页面的其余部分滚动。

background-position背景图像的位置。

CSS3

background-size背景图片的尺寸。默认值：'auto' 其他值：像素，百分比，contain，cover

background-origin背景图片的定位区域。默认值：'padding-box' 'border-box' 、'content-box'(定义背景图片绘制的开始点)

background-clip背景的绘制区域。默认值：'border-box' 还有'padding-box'、'content-box'(定义背景绘制的开始点)

简写方式：

background:background-color background-image background-repeat background-attachment background-position / background-size background-origin background-clip

不设置的属性可以省略

background-Origin属性指定background-position属性应该是相对位置。

注意

1、如果背景图像background-attachment是"固定"，background-origin属性没有任何效果。

2、background-origin 和background-clip很容易混淆，前者是对背景图片而言，后者是对背景而言。不是一个概念。clip默认值比origin默认值范围大，所以默认不会有裁剪效果，如果想设置裁剪，可以把origin范围设置的比clip大就好。比如：origin:'border-box',clip:'padding-box'或者'content-box'.

3、background-size中contain和cover的区别。

cover此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。完全覆盖，可能有图片显示不完整的情况。

contain此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。可能有空白区域

如下图一设置的contain,图二设置的cover

html中背景简写,css中background简写属性相关推荐

CSS3中背景的四个新的属性
本文对CSS3中背景的四个新的属性进行了详细介绍. 多重背景图片 Css3中,对一个元素可以使用一张以上的背景图片.除了使用逗号将图片分开以外,其代码与css2相同.第一个声明的图片定位在元素的顶部, ...
电脑桌面怎么设置html背景图,css中如何设置背景图片？
在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片.那么如何利用css设置html中用图片做背景?本章就给大家介绍css怎样设置背景图片. css怎样设置背景图片? css back ...
html中背景固定,css背景固定样式background-attachment属性介绍
原标题:css背景固定样式background-attachment属性介绍主要为大家介绍了在CSS中,使用背景附件属性background-attachment可以设置背景图像是随对象滚动还是固定 ...
html如何设置背景半透明,css中如何设置背景半透明
css中设置背景半透明效果可以使用opacity属性,该属性用来设置元素的不透明级别,如[opacity:0.5],表示将元素设置为半透明状态. 本文操作环境:windows10系统.css 3.th ...
html中zoom方法,css中的zoom的作用
原标题:css中的zoom的作用小标签大用处,今天重庆IT培训www.ztxuexi.cn就给大家说说css中的zoom的作用 : 1.检查页面的标签是否闭合不要小看这条,也许折腾了你两天都没有解 ...
css禁止背景图拉伸_css3 background 新添属性让你的背景图不再拉伸而是随窗口变化而变化...
传统的页面制作中,当你遇到css2 的时候,如何来显示一张背景图呢?拉伸 (无节操的拉伸,容器长宽完全超出背景图的长宽) 重复展示(用无数张同样的图片来铺满容器的背景面积) x轴 /y轴重复展示(纵 ...
angularjs中ng-show与css中display:none的优先级问题
angular中ng-show 与 css的display:none 用过angular.js的童鞋都知道,ng-show指令在其条件符合时可以使元素显示,条件不符合时使元素隐藏. 我却在前两天写代码 ...
灰白色在html中怎么写,css中怎么让字变灰？
css中怎么让字变灰?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css中怎么让字变灰? 在css中可以使用color属性,设置值为#CCC或rgb( ...
html中zoom方法,CSS中zoom属性或overflow:auto的使用方法
这次给大家带来CSS中zoom属性或overflow:auto的使用方法,使用CSS中zoom属性或overflow:auto的注意事项有哪些,下面就是实战案例,一起来看一下. 前言其实在CSS中的 ...
HTML中注释写法 CSS中注释写法,CSS注解语法,HTML中CSS注释
CSS注释教程篇一.CSS注解语法在CSS代码中进行注解注释语法: /* 注解注释内容 */ 二.HTML中CSS注释我们在HTML中直接使用style标签进行设置CSS样式,那CSS注释注解时 ...

html中背景简写,css中background简写属性

html中背景简写,css中background简写属性相关推荐

最新文章

热门文章