CSS的background背景属性详解

background一个盒子的背景,经常会用于设置背景颜色背景图片

background一共有8个属性设置background的形状

接下来我们依次看一下每个属性的作用和功能

– background-color: 背景颜色

默认值transparent 背景颜色为透明
代码

background-color: white; // 系统定义的颜色名
background-color: rgb(255,255,255); // rgbrgba 格式
background-color: hsla(120,30%,24%,.3); // hsla() 中的a 是Alpha 通道表示透明度,值为0到1

background-image: 背景图

默认值none
代码

linear-gradient() //创建一个线性渐变的 "图像"(从上到下)
radial-gradient() //用径向渐变创建 "图像"
repeating-linear-gradient() //创建重复的线性渐变 "图像"。
repeating-radial-gradient() //创建重复的径向渐变 "图像"
inherit //指定背景图应该从父元素继承

background-repeat: 重复背景图

默认值:repeat 背景图像将向垂直和水平方重复

repeat-x // 背景图像将在水平方重复
repeat-y // 背景图像将在垂直方向重复
no-repeat // 背景图像将仅显示一次
inherit // 规定应该从父元素继承 background-repeat 属性的设置

background-attachment: 是否固定或者随着页面的其余部分滚动

默认值:scroll //背景图像会随着页面其余部分的滚动移动

 background-attachment: fixed; //当页面的其余部分滚动时,背景图像不会移动
 inherit // 规定应该从父元素继承 background-attachment 属性的设置

background-position: 背景图片位置

默认值:0% 0%
提示:您需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作

background-position:center; // 居中
background-position:20% 20%;
background-position:top left; // x轴和y轴的设置 还有多种搭配就不一一写了

background-size: 背景的尺寸

默认值:auto

background-size:80px 60px; // 第一个设置宽度第二个设置高度。 如果只设置一个值,则第二个值会被设置为 "auto"。
background-size:cover;//把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
background-size:contain;//把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域

background-origin: 背景图片定位区域

默认值:paddingbox 背景图像相对于内边距框来定位。

background-origin:content-box; // 背景图像相对于内边距框来定位。
background-origin:border-box; // 背景图像相对边框盒来定位。
background-origin:border-box; // 背景图像相对内容框来定位。

background-clip: 背景图片绘制区域

默认值:border-box //背景被裁剪边框盒。

background-clip:padding-box; // 背景被裁剪到内边距框。
background-clip:content-box; // 背景被裁剪内容框。

亿点小知识:在开发我们可以简写以下代码

background:url() no-repeat center;

以上就是background的属性和用法感谢大家的阅读
如碰到其他的问题 可以私下我 一起探讨学习
如果对你有所帮助还请点赞 收藏谢谢~!
关注收藏博客 作者持续更新

原文地址:https://blog.csdn.net/qq2754289818/article/details/130803867

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_21660.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注