一站式网站建设设计深圳整合营销
css 常用背景属性
- 一、背景颜色background-color
- 二、背景图片background-image
- 三、背景放置位置background-position
- 四、背景填充方式background-repeat
- 五、背景图片大小background-size
- css 常用背景属性总结
一、背景颜色background-color
<运行结果>
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- css引入方式中的内部引用 --><style>div {width: 200px;/* 设置宽度 */height: 100px;/* 设置高度 */background-color: green;/* 设置背景颜色为绿色 */}</style></head><body><div></div></body>
</html>
二、背景图片background-image
background-image(url(图片地址))
【图片地址分为绝对路径(有盘符)和相对路径(./ …/ /)】
设置背景图片步骤：
步骤一：
步骤二：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>div {width: 600px;/* 设置宽度 */height: 600px;/* 设置高度 */background-image: url(01.png);/* 设置背景为图片 */}</style></head><body><div></div></body>
</html>
<运行结果>
三、背景放置位置background-position
background-position（left\center\right，top\center\bottom）
<运行结果，见图2>
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>div {width: 300px;/* 设置宽度 */height: 300px;/* 设置高度 */background-image: url(01.png);/* 设置背景为图片 */background-position: right top;/* 设置背景图片的起始位置,默认是0% 0% *//* 方法一: *//* background-position: 50% 60%; *//* 方法二: *//* x:left center right *//* y:top center bottom *//* right top右上角为起始位置 *//* background-position: x y; 任意组合x,y*/}</style></head><body><div></div></body>
</html>
四、背景填充方式background-repeat
background-repeat（repeat-x水平，repteat-y垂直，no-repeat不重复填充）
repeat-x：水平重复填充
repteat-y：垂直重复填充
no-repeat：不重复填充
<运行结果，见图1>
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>div {width: 1000px;/* 设置宽度 */height: 1000px;/* 设置高度 */background-image: url(01.png);/* 设置背景为图片 */background-repeat: no-repeat;/* 设置背景图片不重复填充*/}</style></head><body><div></div></body>
</html>
五、背景图片大小background-size
cover：如果背景区域太大或太小,图像部分会被裁剪。
contain：如果背景区域太大或太小,图片不会被裁剪，会重复填充。
【使用background-repeat: no-repeat;可去掉图片重复填充)】
<运行结果，见图1>
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>div {width: 1000px;/* 设置宽度 */height: 300px;/* 设置高度 */background-image: url(01.png);/* 设置背景为图片 */background-size: contain;/* 设置背景图片大小*/}</style></head><body><div></div></body>
</html>
css 常用背景属性总结
背景颜色：background-color，
背景图片：background-image(url(图片地址)) ，
背景放置位置：background-position（left\center\right，top\center\bottom），
背景填充方式：background-repeat（repeat-x水平，repteat-y垂直，no-repeat不重复填充），
背景图片大小：background-size（cover，contain）。