您的当前位置:首页CSSbackground属性总结_html/css_WEB-ITnose
广告

CSSbackground属性总结_html/css_WEB-ITnose

2023-11-28 来源:酷申汽车网

CSS background 属性总结

小编还为您整理了以下内容,可能对您也有帮助:

Css3——background属性详解

background :背景。在css里面作为css属性一成员,通过该属性可设置背景图片、背景颜色、背景图片截取等样式。而仅仅一个background又具有多个子属性。

颜色名称,如: background-color:red ;

十六进制背景色,如: background-color:#f00; ;

rgb颜色,这里如果是rgba,a表示透明程度,为0全透明,为1为完全不透明,

如: background-color:rgb(255,0,0.3); ;

特殊值:transparent,透明色: background-color:transparent ;

background-image属性用于为一个元素设置一个或多个背景图片,多个背景图片之间以逗号隔开。

一张图片: background-image: url(img/a.jpg);

多张图片: background-image: url(img/a.jpg),url(img/b.jpg);

特殊值:none,不显示背景图像

background-image: none;

background-repeat 属性定义背景图像的重复方式。背景图像可以沿着水平轴,垂直轴,两个轴重复,或者根本不重复。

常用的4个值:

repeat:水平和垂直方向都重复图像, background-repeat: repeat;

repeat-x:水平方向重复图像

repeat-y:垂直方向重复图像

no-repeat:图像不重复

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

scroll:背景图像相对于页面不动,会随着网页的滚动而移动,默认

fixed:背景图像相对于浏览器窗口不动,内容滚动的时候背景图像不动

background-attachment: fixed;

第一个值为横坐标,第二个值为纵坐标。默认值为:(0% 0%)。

如果只指定了一个值,该值将用于横坐标。纵坐标将默认为50%。

例如: background-position: right; 代表背景图右侧,垂直方向居中的位置。

百分比位置,如:background-position: 20% 20%;

具体像素位置, 如:background-position: 20px 20px;

background-size 设置背景图片大小。图片可以保有其原有的尺寸,或者拉伸到新的尺寸,或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

单张图片的背景大小可以使用以下三种方法中的一种来规定:

当通过宽度和高度值来设定尺寸时,你可以提供一或者两个数值:

每个值可以是<length>, 是 <percentage>, 或者 [auto] 。

示例:

为了设定超过一张以上的图片尺寸时,需要提供多项数值,它们通过逗号分隔。

CSS部分 背景图片分辨率为427*640

分别给box的background-size属性添加不同的属性值,会产生不同的效果。

1、长度 :可以用px、em、rem等指定背景图片大小,不能为负值。

background-clip 裁剪,通常和background-origin一起使用,决定设置元素的背景(背景图片或颜色)是否显示。

注:background-clip只是将背景和背景色粗暴的裁剪。

该属性有四个值

border-box

背景延伸至边框外沿(但是在边框下层)。 background-origin: border-box;

background-origin 规定了指定背景图片[ background-image ] 属性的原点位置的背景相对区域.

border-box

背景图片的摆放以border区域为参考

padding-box

背景图片的摆放以padding区域为参考

content-box

背景图片的摆放以content区域为参考

样式:

先看一下background-origin属性。

先看一下background-clip属性。

这就印证了background-clip只是将背景和背景色粗暴的裁剪。

好的,以上就是我对background的各个属性的理解,实际应用时可能会有部分出入,我们只需要掌握background-color、background-image、background-repeat、background-position、background-size这几个常用的属性即可。

欢迎大家一起交流,讨论。

CSS--background系列属性

css2.1中,颜色的表示方法有三种:(1)单词;(2)rgb表示法(十进制表示法);(3)十六进制表示法。

能够用英语单词来表述的颜色,都是简单颜色。

红色:background-color: red;

红色:background-color:rgb(255,0,0);

rgb(red、green、blue)表示三原色“红”“绿”“蓝”。光学显示器,每个像素都是由三原色的发光原件组成的,靠明亮度不同调成不同的颜色。

用逗号隔开r,g,b的值,每个值的取值范围是0~255,一共256个值。

如果此项的值是255,那么就说明是纯色:

绿色:background-color:rgb(0,255,0)

蓝色:background-color:rgb(0,0,255)

黑色:background-color:rgb(0,0,0)

白色:background-color:rgb(255,255,255)

颜色可以叠加,比如就是红色和的叠加:

:background-color:rgb(255,255,0)

紫色:background-color:rgb(255,0,255)

青色:background-color:rgb(0,255,255)

红色:background-color:#ff0000;

所有用#开头的值,都是16进制的。

#ff0000(ff表示r,00表示g,00表示b)

16进制表示法和rgb类似,也是两位两位的看,但是没有逗号隔开。

上述红色表示法中:ff就是10进制的255,00就是十进制的0,所以#ff0000相当于(255,0,0)

十六进制对照表:

任何一种十六进制表示法都能够换算成rgb表示法。也就是说,两个表示法能表示的颜色数量一样多,十六进制能够简化成3位,所有#rrggbb的形式,都可以写成#rgb;

比如,上述的红色可以写成background-color:#f00;

但是,如果要采用简化的方法,必须满足rrggbb格式才行。

几个特殊的要记住:

黑:#000

白:#fff

红:#f00

灰:#333

深灰:#222

浅灰:#ccc

background-image属性用于给盒子加上背景图片:

background-image:url(images/1.jpg)

url()表示网址。、

images/1.jpg就是相对路径。

背景会默认循环,平铺满整个盒子,padding的区域也会有背景图。

background-repeat属性用来设置背景图是否重复以及重复方式。

“repeat”表示“重复”。

默认为铺满,不用设置。

不重复:background-repeat:no-repeat;

横向重复:background-repeat:repeat-x;

纵向重复:background-repeat:repeat-y;

background-position:背景定位属性。

格式:background-position:向右移动量(100px) 向下移动量(200px)

向上向左移只需把移动量改成负数即可。

css精灵又叫“css雪碧”技术,是一种css图像拼合技术,该方法是将小图标和图像合并到一张图上,然后利用css背景定位来显示需要显示的图片部分。

css精灵的优点,就是减少了http请求。比如4张小图片,原本需要4个http请求。但是用了css精灵,小图片变为了一张图,http请求只有1个了。

background-position:描述左右的词 描述上下的词;

比如:background-position:right bottom:(右下角)

background-position:center center;(居中)

背景固定属性。

格式:background-attachment:fixed;

背景就会被固定住,不会被滚动条滚走。

background属性和border一样,是一个综合属性:

background:red url(1.jpg) no-repeat 100px 100px fixed;

等价于:

background-color:red;

background-image:url(1.jpg);

background-repeat:no-repeat;

background-position:100px 100px;

background-attachment:fixed;

可以任意省略部分:

background:red;

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简写属性

在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

background有哪些属性

background-attachment:scroll | fixed scroll:背景图像是随对象内容滚动。 fixed:背景图像固定。background-color:transparent | color transparent:背景透明色。 color:指定颜色、background-image:none | url none:无背景图。 url:使用绝对或相对地址指定背景图像。background-position : length || length length :  百分数 | 由浮点数字和单位标识符组成的长度值。
background-position : position || position position :  top | center | bottom | left | center | right
background-positionX : length | left | center | right length :  百分数 | 由浮点数字和单位标识符 组成的长度值。 left :  居左 ,center :  居中 ,right :  居右
background-positionY : length | top | center | bottom length :  百分数 | 由浮点数字和单位标识符组成的长度值。left :  居左 ,center :  居中 ,right :  居右
background-repeat : repeat | no-repeat | repeat-x | repeat-y repeat :  背景图像在纵向和横向上平铺,no-repeat :  背景图像不平铺,repeat-x :  背景图像在横向上平铺,repeat-y :  背景图像在纵向平铺

background有哪些属性

background-attachment:scroll | fixed scroll:背景图像是随对象内容滚动。 fixed:背景图像固定。background-color:transparent | color transparent:背景透明色。 color:指定颜色、background-image:none | url none:无背景图。 url:使用绝对或相对地址指定背景图像。background-position : length || length length :  百分数 | 由浮点数字和单位标识符组成的长度值。
background-position : position || position position :  top | center | bottom | left | center | right
background-positionX : length | left | center | right length :  百分数 | 由浮点数字和单位标识符 组成的长度值。 left :  居左 ,center :  居中 ,right :  居右
background-positionY : length | top | center | bottom length :  百分数 | 由浮点数字和单位标识符组成的长度值。left :  居左 ,center :  居中 ,right :  居右
background-repeat : repeat | no-repeat | repeat-x | repeat-y repeat :  背景图像在纵向和横向上平铺,no-repeat :  背景图像不平铺,repeat-x :  背景图像在横向上平铺,repeat-y :  背景图像在纵向平铺

在css中将图像作为网页元素的背景可以通过什么属性

定义和用法

background 简写属性在一个声明中设置所有的背景属性。

可以设置如下属性:

    background-color

    background-position

    background-size

    background-repeat

    background-origin

    background-clip

    background-attachment

    background-image

    如果不设置其中的某个值,也不会出问题,比如 background:#ff0000 url('smiley.gif'); 也是允许的。

    通常建议使用这个属性,而不是分别使用单个属性,因为这个属性在较老的浏览器中能够得到更好的支持,而且需要键入的字母也更少。

    默认值:

    not specified    

    继承性:

    no    

    版本:

    CSS1 + CSS3    

    JavaScript 语法:

    object.style.background="white url(paper.gif) repeat-y"    

    实例

    如何在一个声明中设置所有背景属性:

    body
     {
     background: #00FF00 url(bgimage.gif) no-repeat fixed top;
     }

在css中将图像作为网页元素的背景可以通过什么属性

定义和用法

background 简写属性在一个声明中设置所有的背景属性。

可以设置如下属性:

    background-color

    background-position

    background-size

    background-repeat

    background-origin

    background-clip

    background-attachment

    background-image

    如果不设置其中的某个值,也不会出问题,比如 background:#ff0000 url('smiley.gif'); 也是允许的。

    通常建议使用这个属性,而不是分别使用单个属性,因为这个属性在较老的浏览器中能够得到更好的支持,而且需要键入的字母也更少。

    默认值:

    not specified    

    继承性:

    no    

    版本:

    CSS1 + CSS3    

    JavaScript 语法:

    object.style.background="white url(paper.gif) repeat-y"    

    实例

    如何在一个声明中设置所有背景属性:

    body
     {
     background: #00FF00 url(bgimage.gif) no-repeat fixed top;
     }

css 代码里面 _background 是什么意思?

在css中,background是一个比较常用的样式,但是很多人不知道background怎么用,下面我们来讲解一下cssbackground属性怎么用。

CSS中background什么意思?background用法详解一:CSS中background什么意思?

background属性是在一个声明中,可以设置所有的背景颜色,主要有五个背景颜色,一般我们在使用这个属性的时候,不去单独使用,因为background属性在旧版本的浏览器中,也是可以使用的。

二:background的属性参数:

1.background-color:可以设置指定背景的颜色,也可以使用rgb表示。

2.background-image:图片的背景颜色,只能对url有效

3.background-repeat:对背景图像进行平铺设置。

CSS中background什么意思?background用法详解

浏览器是否支持。

很多浏览器都是可以background的,但是有些版本是不支持一个元素同时有多个背景。

三:background用法详解

1.背景色语法

background-color: blue;

background也可以把背景色设置成透明的,只要把属性换成transparent即可。

2.背景图语法

background-image:url(php.jpg);

3.背景平铺语法:

background-repeat: repeat;

表示背景在水平方向上和垂直方向进行平铺

4.背景定位语法

background-position: 0 0

对图片进行上下左右的设置,从而实现图片的位置。

CSS中background什么意思?background用法详解

css 代码里面 _background 是什么意思?

在css中,background是一个比较常用的样式,但是很多人不知道background怎么用,下面我们来讲解一下cssbackground属性怎么用。

CSS中background什么意思?background用法详解一:CSS中background什么意思?

background属性是在一个声明中,可以设置所有的背景颜色,主要有五个背景颜色,一般我们在使用这个属性的时候,不去单独使用,因为background属性在旧版本的浏览器中,也是可以使用的。

二:background的属性参数:

1.background-color:可以设置指定背景的颜色,也可以使用rgb表示。

2.background-image:图片的背景颜色,只能对url有效

3.background-repeat:对背景图像进行平铺设置。

CSS中background什么意思?background用法详解

浏览器是否支持。

很多浏览器都是可以background的,但是有些版本是不支持一个元素同时有多个背景。

三:background用法详解

1.背景色语法

background-color: blue;

background也可以把背景色设置成透明的,只要把属性换成transparent即可。

2.背景图语法

background-image:url(php.jpg);

3.背景平铺语法:

background-repeat: repeat;

表示背景在水平方向上和垂直方向进行平铺

4.背景定位语法

background-position: 0 0

对图片进行上下左右的设置,从而实现图片的位置。

CSS中background什么意思?background用法详解

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和backgroun-image有什么区别?

1,background 简写属性在一个声明中设置所有的背景属性。
可以设置如下属性:
background-color
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-image
如果不设置其中的某个值,也不会出问题,比如 background:#ff0000 url('smiley.gif'); 也是允许的。
通常建议使用这个属性,而不是分别使用单个属性,因为这个属性在较老的浏览器中能够得到更好的支持,而且需要键入的字母也更少。

2,background-image 属性为元素设置背景图像。

元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。
默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复。

简单来讲,background与background-image是包含关系,前者可以完成后者的功能,但后者不可以。
通常在写css的时候,一般来讲都直接用background做全局设置,不单独去设置。

网页制作中CSS设置里background和backgroun-image有什么区别?

1,background 简写属性在一个声明中设置所有的背景属性。
可以设置如下属性:
background-color
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-image
如果不设置其中的某个值,也不会出问题,比如 background:#ff0000 url('smiley.gif'); 也是允许的。
通常建议使用这个属性,而不是分别使用单个属性,因为这个属性在较老的浏览器中能够得到更好的支持,而且需要键入的字母也更少。

2,background-image 属性为元素设置背景图像。

元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。
默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复。

简单来讲,background与background-image是包含关系,前者可以完成后者的功能,但后者不可以。
通常在写css的时候,一般来讲都直接用background做全局设置,不单独去设置。

CSS background-color的定义和用法

background-color 属性设置元素的背景颜色。
background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不包括外边距)。如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色。
transparent 值
尽管在大多数情况下,没有必要使用 transparent。不过如果您不希望某元素拥有背景色,同时又不希望用户对浏览器的颜色设置影响到您的设计,那么设置 transparent 值还是有必要的。 默认值: transparent 继承性: no 版本: CSS1 JavaScript 语法: object.style.backgroundColor=#00FF00   body {background-color:yellow;}h1 {background-color:#00ff00;}p {background-color:rgb(255,0,255);}

CSS background-color的定义和用法

background-color 属性设置元素的背景颜色。
background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不包括外边距)。如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色。
transparent 值
尽管在大多数情况下,没有必要使用 transparent。不过如果您不希望某元素拥有背景色,同时又不希望用户对浏览器的颜色设置影响到您的设计,那么设置 transparent 值还是有必要的。 默认值: transparent 继承性: no 版本: CSS1 JavaScript 语法: object.style.backgroundColor=#00FF00   body {background-color:yellow;}h1 {background-color:#00ff00;}p {background-color:rgb(255,0,255);}

css 的全局属性都有哪些?

CSS 的全局属性是所有 HTML 元素共有的属性,它们可以用于所有元素,即使属性可能对某些元素不起作用。我们可以在所有的 HTML 元素,甚至是在标准里没有指定的元素上指定全局属性。这意味着任何非标准元素仍必须能够允许应用这些属性,即使使用小写字母。CSS 全局属性主要有:**color**、**background-color**、**text-decoration**、**font-family**、**font-size**、**font-weight**、**line-height**、**list-style-type**、**list-style-position**、**margin**、**padding**、**border-width**、**border-style**、**border-color**、**border-radius**、**box-sizing** 等 。

酷申汽车网还为您提供以下相关内容希望对您有帮助:

Css3——background属性详解

background :背景。在css里面作为css属性一成员,通过该属性可设置背景图片、背景颜色、背景图片截取等样式。而仅仅一个background又具有多个子属性。颜色名称,如: background-color:red ; 十六进制背景色,如: backgrou...

在css中将图像作为网页元素的背景可以通过什么属性

background-attachment background-image 如果不设置其中的某个值,也不会出问题,比如 background:#ff0000 url('smiley.gif'); 也是允许的。通常建议使用这个属性,而不是分别使用单个属性,因为这个属性在较老的浏览器中...

css中background简写属性

在CSS2.1里,background属性的简写方式包含五种属性值,从CSS3开始,又增加了3个新的属性值,加起来一共8个。CSS2.1 background-color使用的背景颜色。background-image使用的背景图像。background-repeat如何重复背景图像。

CSS--background系列属性

background-position:背景定位属性。格式:background-position:向右移动量(100px) 向下移动量(200px)向上向左移只需把移动量改成负数即可。css精灵又叫“css雪碧”技术,是一种css图像拼合技术,该方法是将小图标和图像...

background有哪些属性

background-repeat : repeat | no-repeat | repeat-x | repeat-y repeat :  背景图像在纵向和横向上平铺,no-repeat :  背景图像不平铺,repeat-x :  背景图像在横向上平铺,repeat-y :  背景图像在纵向平铺 ...

HTML页面引入CSS的几种方式及区别_html/css_WEB-ITnose

2. 将样式代码写在标签中通常将style标签放到HTML文件标签里如: div { background: #fff; } 此种方式的优点:单个页面内的CSS代码具有统一性和规划性,便于维护。缺点:多个页面之间CSS复用仍然不够。 3. 使用标签,引...

CSS中的background和background-color的区别

区别如下:一,background可以设置背景颜色、背景图片、定位等。而background-color只能设置背景颜色 。二,底色(background-color)是纯的色区。背景(background),可以是纯色也可以是图案。三,background的属性值是图片资源,...

CSS中的color\background-color有什么区别?

区别:作用不同 color用于设置字体颜色,而background-color同于设置背景颜色。实例 1、color body { color:red; } h1{ color:#00ff00; } p{ color:rgb(0,0,255); } 2、background-color body{ background...

CSS里的background url怎么设置呢?

1、首先,打开html编辑器,新建html文件,例如:index.html。2、在index.html中的&lt;style&gt;标签中,输入css代码:body {background-image: url(img/image.jpg)}。3、浏览器运行index.html页面,此时成功把同级的img文件夹中...

...实现各种几何图形形状效果_html/css_WEB-ITnose

大家都知道CSS具有强大的功能,能够让页面变得美观靓丽,随着CSS的版本的提高,功能也越来越强大,下面简单介绍一下如何使用CSS实现各种几何图形效果。一.实现正方形:蚂蚁部落.mytest{ width:100px; height:100px; background-...

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

Top