html基础之背景属性
今天突发奇想,复习一下css相关属性,并做一下笔记,因为是复习就不详细介绍,只是以例子简单介绍一下用法
属性 | 描述 |
---|---|
background | 在一个声明中设置所有的背景属性。 |
background-attachment | 设置背景图像是否固定或者随着页面的其余部分滚动。 |
background-color | 设置元素的背景颜色。 |
background-image | 设置元素的背景图像。 |
background-position | 设置背景图像的开始位置。 |
background-repeat | 设置是否及如何重复背景图像。 |
background-clip | 规定背景的绘制区域。 |
background-origin | 规定背景图片的定位区域。 |
background-size | 规定背景图片的尺寸。 |
background 简写属性在一个声明中设置所有的背景属性。
可以设置如下属性:
background-color
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-image
background-color 规定要使用的背景颜色。
div {background-color: yellow;}
h1 {background-color: #00ff00;}
p {background-color: rgb(255, 0, 255);}
书写颜色的几种方案
书写颜色的方法有几种,其中有比较常见的就是,直接书写的颜色(red
)。 规定颜色值为十六进制值的背景颜色(比如 #ff0000
)。规定颜色值为 rgb 代码的背景颜色(比如rgb(255,0,0)
)。
当然了还有一个可以直接设置透明度的p {background-color: rgba(255, 0, 255,0.1);}
;即最后一个参数范围0-1,代表着透明度,其他的都容易理解,这里简单介绍一下十六进制颜色和rgb()颜色,因为我不怎么会写
以#FFFFOO
为例。从#后第1位开始每2位为一组,表示一个颜色的值(这是以十六进制来算的)
第1组为红色,第2组为绿色,第3组为蓝色
根据三基色的原理,红色与绿色混合为黄色,红色与蓝色混为紫色,绿色与蓝色混合为青色。 来看看这些基本色的颜色代码:
红色#FF0000,绿色#00ff00,蓝色为#0000ff,
黄色为#FFFFOO,紫色为#ff00ff,青色为#00ffff,白色#ffffff,黑色#000000(上面所提到的都是饱和色)
不知道你有没有这种经验,就是当所有的数值都相等的时候只有三种状态,黑白灰,数值越大,颜色越亮。于是当看到一些颜色代码的时候可以这么分析 举个例子啊:
比如颜色代码#ff9966,从这个代码中我们可以每个位上都减去6,于是便剩下#993300,然后可以分析出这种颜色偏向黄的红色,而且颜色较淡,有些灰,前面每位减去6了,具体颜色名称要具体分析
同样的,rgb()颜色有着相同的特性;
RGB 分别代表 red green blue
000000 表示什么颜色都没有,黑色
FF0000 红色,00FF00 绿色,0000FF 蓝色
就从单色来看,这个值越大这个颜色越亮(越红),这个值越小则越暗(越黑)。以下是笔者用axure画的红色色谱。
background-position 规定背景图像的位置。
取值很简单,直接从别处截图
很明显,三种取值方式,不同的位置有不同的取值方法,如下所示
div {
background: url(img/demo.png) no-repeat;
background-position: center center;
/* background-position: 50px 50px; */
/* background-position: 50% 50%; */
background-size: 150px 100px;
width: 250px;
height: 200px;
border: 1px solid red;
}
不过在使用百分比時时需要注意,这里的移动点是图片的终点,简单的说就是background-position: 50% 50%;
时,图片会居中,并不是和其他的一样,以x,y轴坐标为标准。所以在设置图片居中时候这是个比较好的方法,以上的三种测试都是如下图
background-size 规定背景图片的尺寸。
代码示例即使所对应的图片如下
/* background-size: 125px 200px; */
/* background-size: 125px ; */
/* background-size: 50% 100%; */
/* background-size: 50% ; */
/* 如果只设置一个值,则第二个值会被设置为 "auto"。 */
/* background-size: contain; */
/* 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。 */
background-size: cover;
/* 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。 */
background-repeat 规定如何重复背景图像。
没什么说的,即如何平铺背景,还有一些不常用的直接截图属性值
值 | 描述 |
---|---|
repeat | 默认。背景图像将在垂直方向和水平方向重复。 |
repeat-x | 背景图像将在水平方向重复。 |
repeat-y | 背景图像将在垂直方向重复。 |
no-repeat | 背景图像将仅显示一次。 |
inherit | 规定应该从父元素继承 background-repeat 属性的设置。 |
background-origin 规定背景图片的定位区域。
值 | 描述 |
---|---|
padding-box | 背景图像相对于内边距框来定位。 测试 |
border-box | 背景图像相对于边框盒来定位。 测试 |
content-box | 背景图像相对于内容框来定位。 |
background-clip 规定背景的绘制区域。
值 | 描述 |
---|---|
border-box | 背景被裁剪到边框盒。 |
padding-box | 背景被裁剪到内边距框。 |
content-box | 背景被裁剪到内容框。 |
background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。
值 | 描述 |
---|---|
scroll | 默认值。背景图像会随着页面其余部分的滚动而移动。 |
fixed | 当页面的其余部分滚动时,背景图像不会移动。 |
inherit | 规定应该从父元素继承 background-attachment 属性的设置。 |
background-image 规定要使用的背景图像。
详细内容 https://www.w3school.com.cn/cssref/pr_background.asp
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析