百科狗-知识改变命运!
--

background - 背景复合属性 - css 背景颜色

乐乐1年前 (2023-11-21)阅读数 12#技术干货
文章标签背景

background

background 是一种 CSS 简写属性,用于一次性集中定义各种背景属性,包括color,image,originsize,repeat方式等等。

此属性是一个简写属性,可以在一次声明中定义一个或多个属性:background-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-size,和background-attachment

对于所有简写属性,任何没有被指定的值都会被设定为它们的初始值。

示例

/* 使用  */
background: green;

/* 使用  和  */
background: url("test.jpg") repeat-y;

/* 使用  和  */
background: border-box red;

/* 将背景设为一张居中放大的图片 */
background: no-repeat center/80% url("../img/image.png");

浏览器支持

浏览器都支持background

语法:

background:| | | | | | |

background - 背景复合属性 - css 背景颜色

下面的一个或多个值,可以按任意顺序放置:

  • :指定对象的背景图像。可以是真实图片路径或使用渐变创建的“背景图像”。参见background-image
  • :指定对象的背景图像位置。参见background-position
  • :指定对象的背景图像的尺寸大小。参见background-size
  • :指定对象的背景图像如何铺排填充。参见background-repeat
  • :指定对象的背景图像是随对象内容滚动还是固定的。参见background-attachment
  • :指定对象的背景图像显示的原点。参见background-clipbackground-origin
  • :指定对象的背景颜色。参见background-color
默认值看每个独立属性
适用于所有元素
继承性
动画性看每个独立属性
计算值看每个独立属性

说明:

复合属性。检索或设置对象的背景特性(背景色不能设置多组)。

  • 一个元素可以设置多重背景图像。每组属性间使用逗号分隔。
  • 如果设置的多重背景图之间存在着交集(即存在着重叠关系),前面的背景图会覆盖在后面的背景图之上。

示例:假设要在同一个元素上定义3个背景图像。缩写方式:

background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px content-box padding-box,
	   url(test1.jpg) no-repeat scroll 10px 20px/70px 90px content-box padding-box,
	   url(test1.jpg) no-repeat scroll 10px 20px/110px 130px content-box padding-box #aaa;

注意,只能设置一次,且由于写在前面的背景会叠在之后的背景之上,所以背景色通常都定义在最后一组上,避免背景色将图像盖住。

拆分方式:

background-image:url(test1.jpg),url(test2.jpg),url(test3.jpg);
background-repeat:no-repeat,no-repeat,no-repeat;
background-attachment:scroll,scroll,scroll;
background-position:10px 20px,10px 20px,10px 20px;
background-size:50px 60px,70px 90px,110px 130px;
background-origin:content-box,content-box,content-box;
background-clip:padding-box,padding-box,padding-box;
background-color:#aaa;

如果定义了多个背景图片,而其他属性只有一个参数值,则表明所有背景图片的该属性都应用同一个参数值。据此可以对上面的例子进行缩写

background-image:url(test1.jpg),url(test2.jpg),url(test3.jpg);
background-repeat:no-repeat;
background-attachment:scroll;
background-position:10px 20px;
background-size:50px 60px,70px 90px,110px 130px;
background-origin:content-box;
background-clip:padding-box;
background-color:#aaa;

如果定义了多个背景图片,而和设置了相同的值。可这样缩写

background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px padding-box,
	   url(test1.jpg) no-repeat scroll 10px 20px/70px 90px padding-box,
	   url(test1.jpg) no-repeat scroll 10px 20px/110px 130px padding-box #aaa;

例子

//HTML

starry sky
twinkle twinkle
starry sky

here is a paragraph

//CSS .warning { background: red; } .topbanner { background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed; }

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com

免责声明:我们致力于保护作者版权,注重分享,当前被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理!邮箱:344225443@qq.com)

图片声明:本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

内容声明:本文中引用的各种信息及资料(包括但不限于文字、数据、图表及超链接等)均来源于该信息及资料的相关主体(包括但不限于公司、媒体、协会等机构)的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理!本站为非盈利性质站点,本着为中国教育事业出一份力,发布内容不收取任何费用也不接任何广告!)