浅析CSS中background背景的用法

这篇文章给大家介绍的文章内容是关于浅析css中background背景的用法,有很好的参考价值,希望可以帮助到有需要的朋友。

定义和用法

基本属性:color, image, position, repeat

背景颜色 background-color

值为颜色值或transparent二者选其一,默认值是transparent(透明)。

颜色值可以为16进制颜色码或者RGB颜色值,也可以是英文代码。不建议使用英文代码,不同浏览器对不同颜色代码处理的效果有可能不同。

设置背景颜色作为后备也是很重要的。背景颜色在各处都得到了支持,而背景梯度等更奇异的特性只在较新的浏览器中得到支持,加上背景图像可能由于某种原因无法加载。因此,设置基本的背景颜色和指定这些特性是一个好主意,因此无论如何,元素的内容都是可读的。

背景图像 background-image

指定显示的背景图片,用url()设置路径。

立即学习“前端免费学习笔记(深入)”;

默认的图片重复方式为水平垂直皆重复。

背景重复 background-repeat

指定背景图像如何重复的,默认值是repeat(一直重复,直到整个元素的背景被填充)

值 描述

no-repeat不重复repeat垂直和水平都重复repeat-xX轴方向(水平)重复repeat-yY轴方向(垂直)重复

背景位置 background-position

指定定位背景图片的位置,原点为左上角(0,0)。

可输入两个值代表 X 轴和 Y 轴,也可以只输入一个值。

可输入长度值(px等)、相对值(rem等)、百分比、关键字(left,center,right,top,bottom)

若只输入一个值,则代表 X 轴的值,Y 轴变成center

值可以混搭,如background-position:9px top;

额外属性

背景滚动 background-attachment

指定当内容滚动时背景如何滚动。

值 描述

scroll默认值。滚动,背景图随着页面的滚动而移动。fixed固定,当页面的其余部分滚动时,背景图像不会移动。

相关推荐:

css中border-sizing属性的用法

以上就是浅析CSS中background背景的用法的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2894717.html

(0)
上一篇 2025年3月10日 22:51:13
下一篇 2025年3月6日 09:27:24

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论