backgroundcss用法(backgrounds的意思)
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
CSS中的background和background-color的区别
区别如下:
一,background可以设置背景颜色、背景图片、定位等。而background-color只能设置背景颜色 。
二,底色(background-color)是纯的色区。背景(background),可以是纯色也可以是图案。
三,background的属性值是图片资源,而background-color的是颜色。
扩展资料:
常用的CSS属性的英文单词总结及用法、解释:
float -?浮动:设置块元素的浮动效果。可选常用到参数left、right 。
css width -?宽度:确定盒子本身的宽度,可以使盒子的宽度不依靠它所包含的内容多少。
css height?- 高度 :确定盒子本身的高度。
css clear?- 清除 :用于清除设置的浮动效果,常用参数both 、left、right。
margin?- 边距 :控制围绕边框的边距大小。其中包含4个属性:margin-top控制上边距的宽度。
margin-right:控制右边距的宽度。
margin-bottom:控制下边距的宽度。
margin-left:控制左边距的宽度。
padding?-内边界:确定围绕块元素的空格填充数量。
font-family-?css字体:设定时,需考虑浏览器中有无该字体。
font-size?-?css字体大小:注意度量html单位。
font-weight?- css字体粗细-css加粗样式:除了normal(正常)、bold(粗体)、bolder(特粗)、lighter(细体)外,还有9种以像素为度量为单位的设置方式。
css font-style-样式:css字型。
css line-height?-?css行高:行距。
font-variant - css变形:可以将正常文字一半尺寸后大写显示。
text-transform?- css大小写:这项属性能轻而易举地控制字母大小写。
CSS background-image的定义和用法
background-color 属性设置元素的背景颜色。
background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不包括外边距)。如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色。
transparent 值
尽管在大多数情况下,没有必要使用 transparent。不过如果您不希望某元素拥有背景色,同时又不希望用户对浏览器的颜色设置影响到您的设计,那么设置 transparent 值还是有必要的。 默认值:transparent继承性:no版本:CSS1JavaScript 语法:object.style.backgroundColor=#00FF00body {background-color:yellow;}h1 {background-color:#00ff00;}p {background-color:rgb(255,0,255);}
CSS之background深度详解
background 是CSS中一个常用的属性,用来修改某个元素的背景;
background 拥有8种属性,常用的是前5种,分别为:
简写模式:
background:#eee url() no-repeat center/cover
参考资料: