Web元素设计之背景控制

1. background

该属性集成了所有CSS背景控制的相关内容,书写形式如下(注意顺序):

background: #ececec url(imgs/bg.png) no-repeat fixed 0 0;

即:background: 背景颜色 背景图片 背景图片平铺模式 背景图片滚动模式 背景图片定位

当然,对于不需要指定的或者使用默认值的,省略即可。

2. background-color

该属性用于设定元素的背景颜色。

默认值为transparent,表示背景颜色为透明,也就是无背景颜色。

支持16进制颜色值、RGB颜色值以及颜色名称。考虑到兼容性,建议使用16进制颜色值或者RGB颜色值。

3. background-image

该属性用于设定元素的背景图片,书写形式如下:

background-image: url(imgs/bg.png);
4. background-repeat

该属性用于控制背景图片的平铺模式(横向平铺、纵向平铺、不平铺),默认横向、纵向都平铺。书写形式如下:

background-repeat: repeat-x;
background-repeat: no-repeat;
5. background-attachment

该属性用于设定背景图片的滚动模式。

默认情况下,当出现滚动条时,背景图片会随着滚动条的滚动而滚动。当希望背景图片始终固定不变时,可以将该属性设置如下:

background-attachment: fixed;

此时背景图片将会完全固定。该属性的默认值为scroll

6. background-position

该属性用于设定背景图片的定位,也就是控制背景图片在元素中的定位(相当于将背景图片针对元素作相对定位)。雪碧图的原理就基于此项属性。

其值支持百分比、元素值、位置描述词(top/bottom/left/right/center)等。书写形式如下:

background-position: center top;  /*中上位置*/
background-position: 50% 50%;  /*完全居中*/
background-position: -20px -10px;  /*偏移指定值*/
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,995评论 32 459
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 2,125评论 0 6
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,302评论 1 92
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 2,192评论 0 2
  • 在灰暗黄昏的荒草枯丛中 在冰天雪地的极度寒冷中 在酝酿诡计的漫漫黑夜中 在狂风暴雨的悬崖陡壁中 我始终仰着头 遥望...
    溪桥星雨阅读 162评论 0 0

友情链接更多精彩内容