欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 新闻 > 会展 > CSS的背景属性

CSS的背景属性

2024/12/31 1:01:07 来源:https://blog.csdn.net/qq_56807425/article/details/144437409  浏览:    关键词:CSS的背景属性

背景颜色

background-color:值

  • 合法的颜色值
  • 颜色名;16进制表示;rgb;rgba
  • 当没有设置时,默认的背景色是透明的,transparent
     background-color: antiquewhite;background-color: #0000ff;background-color: rgb(255, 0, 0); background-color: rgba(255, 0, 0,0.6);

背景图片

background-image:url(图片路径)

  • 默认值无图片
  • 若同时设置background-color和image则同时生效
     background-color: rgba(255, 0, 0,0.6); background-image: url('SeanXiao.png(图片地址)');

背景重复

若元素的宽高大于图片的宽高,则会发生背景重复

background-repeat:值

  • 默认值:repeat
  • no-repeat不重复
  • repeat-x 在x轴上重复
  • repeat-y 在y轴上重复
    background-image: url(duck.jpg);background-repeat: repeat-x;

背景尺寸

  • 使用背景图片时,可以设置背景的宽高
  • background-size:宽度 高度
  • 尺寸单位:背景图片的宽度和高度是一个固定的值
      background-size: 100px 600px;background-size: 10em 5em;//以父元素的百分比来设置图片的宽度和高度background-size: 50% 60%;
  • contain:把背景图片扩展至最大尺寸,使宽度或者高度完全适应内容区域,但保持原有的宽高比例
  • cover:把背景图片扩展至足够大,使背景图片完全覆盖区域,但背景图片的某些部分无法显示在元素区域中
  • 若只设置一个值如 background-size:200px === background-size:200px auto,另一个值为auto,图片不变形,保持原有的比例

背景定位

background-position:x(水平位置) y(垂直位置)

  • 方向定位:top bottom right left center
  • 当只设置一个值时,另一个值为center
      background-position: left top;background-position: 40px 100px;background-position: left;background-position: center center;

在这里插入图片描述

背景固定

background-attachment:值

  • scroll:下拉时,背景随着滚动条上移
  • fixed:下拉时,背景不会随着滚动条上移
      background-attachment: scroll;background-attachment: fixed;

背景属性简写

background: rgba(255,0,0,0.5) url(SeanXiao.png) no-repeat 100px 100px/800px 500px fixed;

background:颜色值 背景图片 背景重复 背景定位/背景尺寸 背景固定

  • 可以在一个属性background中设置所有的背景属性,用空格隔开
  • 如果某个值不写,也不会出问题
  • 使用背景属性简写输入的代码最少,浏览器对背景简写的支持度也更高

关于‘背景定位/背景尺寸’

  • 当两组值都存在时,需要用‘ / ’隔开
  • 当在背景简写中只出现一组值时,表现为背景定位
  • background: rgba(255,0,0,0.5) url(SeanXiao.png) no-repeat 800px 500px fixed; (800px 500px为背景的位置信息)
  • background: rgba(255,0,0,0.5) url(SeanXiao.png) no-repeat 100px 100px/800px 500px fixed; (100px 100px为背景的定位位置信息,800px 500px为图片的尺寸大小信息)
  • background: rgba(255,0,0,0.5) url(SeanXiao.png) no-repeat 0 0/800px 500px fixed; ( 0 0为背景的定位位置信息,800px 500px为图片的尺寸大小信息)

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com