背景background相关内容

关注

最新推荐文章于 2025-07-29 10:35:38 发布 · 206 阅读

原创 ·

本内容遵循 CC 4.0 BY-SA 版权协议

css背景属性全家桶 background背景图片好用技巧 img fill 默认不保证保持原有的比例，内容拉伸填充整个内容容器。contain保持原有尺寸比例。内容被缩放。cover保持原有尺寸比例。但部分内容可能被剪切。none保留原有元素内容的长度和宽度，也就是说内容不会被重置。scale-down保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。initial设置为默认值一、图片的盒模型二、background-origin与clip 背景图片定位参考系与背景裁剪。阅读详情

背景颜色
➢属性名: background-color
bgc
➢属性值:
●颜色取值:关键字、rgb表示法、rgba表示法、十六进制...
➢注意点:
背景颜色默认值是透明: rgba(0,0,0,0) 、transparent
背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，- 般在布局中会习惯先给盒子设置背景颜色

背景图片
➢属性名:| background-image (bgi)
➢属性值:|
background- image: url( '图片的路径' ); |
➢注意点:
。
背景图片中urI中可以省略引号
背景图片默认是在水平和垂直方向平铺的
●
背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

背景平铺
➢属性名: background-repeat (bgr)
➢_ 属性值:
取值
效果
repeat
(默认值)水平和垂直方向都平铺
no-repeat
不平铺
repeat-x
沿着水平方向(x轴)平铺
repeat-y
沿着垂直方向(y轴)平铺

3.1背景平铺
➢属性名: background-repeat (bgr)
➢_ 属性值:
取值
效果
repeat
(默认值)水平和垂直方向都平铺
no-repeat
不平铺
repeat-x
沿着水平方向(x轴)平铺
repeat-y
沿着垂直方向(y轴)平铺

小结
➢背景位置属性的属性名是?
background-position
➢背景位置属性的取值有哪些?
left
水平方向
center
1.方位名词(最多只能表示9个位置)
right
top
+
属性值
垂直方向
center
bottom
原点(0.0) 日盒子的左上角
2. 数字+px (坐标
坐标系生x轴。水平向右
y轴。重直向下
操作日将图片左上角与坐标点重合即可

背景相关属性的连写形式
➢属性名| background
(bg)
➢属性值:
单个属性值的合写，取值之间以空格隔开
➢书写顺序:
推荐: background: color image repeat position
➢省略问题:
可以按照需求省略
特殊情况:在pc端，如果盒子大小和背景图片大小- -样,此时可以直接写background: url()
>注意点
如果需要设置单独的样式和连写
①要么把单独的样式写在连写的下面
②要么把单独的样式写在连写的里面

背景位置
➢属性名
background-position (bgp)
➢属性值: background- position:水平方向位置垂直方向位置;

图片见微信收藏
➢
注意点:
方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直

(拓展) img标签和背景图片的区别
➢需求:需要在网页中展示一-张图片的效果?
➢方法一:直接写上img标签即可
●img标签是一个标签，不设置宽高默认会以原尺寸显示
➢方法二: div标签+背景图片
●
需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签

需求:需要在网页中展示一-张图片的效果?
➢方法一:直接写上img标签即可
●img标签是一个标签，不设置宽高默认会以原尺寸显示
➢方法二: div标签+背景图片
●
需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签