css教程css背景样式都包含哪些

 所属分类:web前端开发

 浏览:162次-  评论: 0次-  更新时间:2022-10-18
描述:更多教程资料进入php教程获得。 css背景样式包含:背景颜色“background-color”、背景图片“background-image”、背景定位“background-po...
更多教程资料进入php教程获得。

css背景样式包含:背景颜色“background-color”、背景图片“background-image”、背景定位“background-position”、背景重复“background-repeat”、“background”等。

前端(vue)入门到精通课程:进入学习
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具:点击使用

本教程操作环境:windows7系统、CSS3版、Dell G3电脑。

1、background-color 设置元素的背景颜色。

background-color:颜色/transparent
登录后复制

说明:

  • transparent是全透明

  • 颜色值(颜色名/RGB/十六进制)

背景区包括内容、内边距(padding)和边框(border)、不包含外边距(margin)

2、background-image 设置元素的背景图片。

background-image:url(图片地址)/none
登录后复制

说明:

  • url地址可以是相对地址也可以是绝对地址

  • 元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距

  • 默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复。

  • 当即设置了背景图片又设置了背景颜色时,背景图片会覆盖背景颜色

3、background-position 设置背景图片的起始位置,背景定位

background-position :百分比/px/top/right/bottom/left/center
登录后复制

4、background-attachment 背景图像是否固定或者随着页面的其余部分滚动

background-attachment:scroll/fixed
登录后复制
  • scroll: 默认值,随着图片的滚动而滚动

  • fixed:当页面的其余部分滚动时,背景图片不会移动

5、background-repeat 设置背景图像是否重复及如何重复

background-repeat:repeat/no-repeat/repeat-x/repeat-y 

//分别是重复、不重复、水平重复、不重复
登录后复制

6、background 简写属性,作用是将背景属性设置在一个声明中。

background:[background-color] [background-image] [background-repeat] [background-attachment] [background-position]
登录后复制

说明:各值之间用空格分割,不分先后顺序

(学习视频分享:css视频教程)

以上就是css背景样式都包含哪些的详细内容,更多请关注zzsucai.com其它相关文章!

 标签: css,背景样式,
积分说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值积分充值会员更多说明»

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!