08 背景设置

最新推荐文章于 2023-05-22 13:47:54 发布

小鱼儿爱喝酒

最新推荐文章于 2023-05-22 13:47:54 发布

阅读量831

点赞数

分类专栏： WEB前端学习文章标签： html5

本文链接：https://blog.csdn.net/dskfksdf/article/details/117475380

版权

WEB前端学习专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1 背景颜色 background-color

默认情况下，背景颜色background-color：transparent；表示无颜色，透明色。

2 背景图片

参数值	作用
repeat	背景图像在纵向和横向上平铺
no-repeat	背景图像不平铺
repeat-x	背景图像在横向上平铺
repeate-y	背景图像在纵向上平铺

背景平铺设置：background-repeat：repeat；

背景图片设置 background-image：none （默认情况下）

通常情况下，background-image：url（路径）；

小试牛刀：以此表示no-repeat；repeat；repeat-x; repeat-y.

代码展示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>背景</title>
		<style type="text/css">
			div {
			width: 800px;
			height:800px;
			/* 平铺 */
			/* 页面可以添加背景颜色也可以添加背景图片,但是背景图片在背景颜色的上方. */
			background-color: aliceblue;
			background-image: url(../image/aoteman.jpg);
			/* 表示不平铺 */
			/* background-repeat: no-repeat; */
			/* 表示平铺 */
		/* 	background-repeat: repeat; */
			/* 表示演x平铺 */
			/* background-repeat:repeat-x; */
			/* 表示演y平铺 */
			background-repeat:repeat-y;
		}
		</style>
		
	</head>
	<body>
		<div id="">
			
		</div>
	</body>
</html>

3 背景方位

通过css背景属性，可以给页面元素添加背景样式；背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定

背景图片位置 background-position: x y;

精确定位：background-position: 20px 50px;

混合模式：background-position：center 20px;

参数值	说明
length	百分数\|由浮点数字和单位标识符组成的长度值
position	top、center、bottom、left、center、right

实际案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>背景</title>
		<style type="text/css">
			div {
			width: 800px;
			height:800px;
			/* 平铺 */
			/* 页面可以添加背景颜色也可以添加背景图片,但是背景图片在背景颜色的上方. */
			background-color: aliceblue;
			background-image: url(../image/aoteman.jpg);
			background-repeat: no-repeat;
			/* 方位 */
		/* 	background-position: center right; */
			background-position: top left;
		}
		</style>
		
	</head>
	<body>
		<div id="">
			
		</div>
	</body>
</html>

4 案例1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>英雄联盟背景</title>
		<style type="text/css">
			h1 {
				font-weight: 400;
				background-image: url(../image/default.png);
				background-repeat: no-repeat;
		/* 		背景位置居中靠左 */
				background-position: center left;
				/* 文字缩进2.5em */
				text-indent: 2.5em;
			}
		</style>
	</head>
	<body>
		<h1>亲爱的召唤师，欢迎登陆</h1>
	</body>
</html>

5 案例2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>英雄联盟背景</title>
		<style type="text/css">
			body {
				background-image: url(../image/YJH.jpg);
				background-position: top center;
				background-repeat: no-repeat;
			}
		</style>
	</head>
	<body>
		
	</body>
</html>

6 背景固定

固定： background-attachment: fixed; 字体滚动，图片固定

滚动： background-attachment: scroll; （默认）：字体和图片一块滚动

7 背景属性的简洁写法

background: 背景颜色背景图片地址背景平铺背景图像滚动背景图片位置；

中间用空格隔开

background: #FF0000 url(../image/YJH.jpg) repeat fixed top center;

8 css的背景

颜色背景半透明的效果

background： rgba(0,0,0,0.3);

最后一个参数是alpha透明度，取值介于0到1之间，0表示完全无颜色，1表示全颜色

background-color:balck; 相当于background: rgba(1,1,1,1);

小鱼儿爱喝酒

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
08 背景设置

1 背景颜色 background-color默认情况下，背景颜色background-color：transparent；表示无颜色，透明色。2 背景图片参数值作用 repeat 背景图像在纵向和横向上平铺 no-repeat 背景图像不平铺 repeat-x 背景图像在横向上平铺 repeate-y 背景图像在纵向上平铺背景平铺设置：background-repeat：repeat；背景图片设置 background-imag.
复制链接

扫一扫