CSS背景样式常见的有什么,如何应用

Admin 2022-05-25 群英技术资讯 354 次浏览

这篇文章主要讲解了“CSS背景样式常见的有什么,如何应用”,文中的讲解内容简单、清晰、详细,对大家学习或是工作可能会有一定的帮助,希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学习一下吧。

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

本教程操作环境: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背景样式常见的有什么,如何应用的内容应该都有一定的认识了吧,希望这篇能对大家有所帮助。最后,想要了解更多,欢迎关注群英网络,群英网络将为大家推送更多相关的文章。 群英智防CDN,智能加速解决方案
标签: css背景样式

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

猜你喜欢

成为群英会员,开启智能安全云计算之旅

立即注册
专业资深工程师驻守
7X24小时快速响应
一站式无忧技术支持
免费备案服务
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
在线客服
微信公众号
返回顶部
返回顶部 返回顶部
在线客服
在线客服