background

Thu, 10 Oct 2024 00:00:00 +0800

引言

在日常前端开发中，经常需要进行背景或背景图的处理。但是大多数前端er并未真正清楚背景的正确使用方式。经过本章的学习，相信你一定可以解决99%的背景处理问题。

一：简单使用

背景颜色和背景图片是可以共同出现的

 div {
 width: 300px;
 height: 300px;
 background-color: red;
 background-image: url(./imgs/1.jpg);
 background-repeat: no-repeat;
 }

页面展示

一：background-repeat

background-repeat决定背景图片的平铺方式

属性值

background-repeat:repeat (默认值)
background-repeat:no-repeat (不平铺)
background-repeat:repeat-x （水平方向平铺）
background-repeat:repeat-y （垂直方向平铺）

1. repeat

默认情况下，如果背景图片不能铺满整个盒子时，系统会在水平和垂直方向同时平铺直到覆盖整个盒子

div {
 width: 300px;
 height: 300px;
 background-color: red;
 background-image: url(./imgs/1.jpg);
 background-repeat: repeat;
 }

2.repeat-x

如果背景图片不能将盒子的水平方向铺满，则在水平方向采取平铺处理直到铺满盒子的水平方向。

div {
 width: 300px;
 height: 300px;
 background-color: red;
 background-image: url(./imgs/1.jpg);
 background-repeat: repeat-x;
 }

3.repeat-y

如果背景图片不能将盒子的垂直方向铺满，则在垂直方向采取平铺处理直到铺满盒子的垂直方向。

div {
 width: 300px;
 height: 300px;
 background-color: red;
 background-image: url(./imgs/1.jpg);
 background-repeat: repeat-y;
 }

二：background-position

background-positiont决定背景图片在盒子区域的定位位置。其方位由水平和垂直决定

1.px设置

px决定了背景图片在盒子水平和垂直方向偏移指定px的距离。

div {
 width: 300px;
 height: 300px;
 background-color: red;
 background-image: url(./imgs/1.jpg);
 background-repeat: no-repeat;
 background-position: 100px 100px;
 }

Background on Last Stand

background

引言

一：简单使用

一：background-repeat

二：background-position