背景的声明

搬砖老金牛

于 2022-03-29 21:22:07 发布

阅读量129

点赞数

分类专栏： html和css 文章标签： html5 css

本文链接：https://blog.csdn.net/qq_48968230/article/details/123813691

版权

html和css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、背景图片的插入

网页中的图片以背景的方式进行呈现，属于css的范畴，背景图片会显示在子元素之下。

注意：背景图片的盒子元素必须要有尺寸

格式：background-image：url（图片地址）

二、背景图片的设置

1、设置背景图片的平铺问题

background-repeat：repeat（平铺x轴和y轴）

background-repeat：repeat-x(平铺x轴)

background-repeat：repeat-y(平铺y轴)

background-repeat：no-repeat(不平铺)

2、设置背景图片的显示位置

background-position：水平方向(px/%/left/right/center) 垂直方向(px/%/top/bottom/center)

例如：background-position：center center；

3、设置背景图片的显示尺寸

background-size：水平方向尺寸(px/%) 竖直方向尺寸(px/%)

background-size：cover（等比放大缩小，但是有些部位会被遮挡）

background-size：contain（等比缩放，但是只要有一个方向盛满元素，就不在进行缩放)

例如：background-size: 100% 100%; /* 图片会拉伸 */

总写：

background：背景图片的链接地址平铺设置背景图片的显示位置；

例如：background: url(../img/巨星科技_05.png) no-repeat center center;

补充：

背景图片透明度

例如：opacity: 0.3;

实操：

test8.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/test8.css"/>
		<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
		<script>
			$(document).ready(function(){
				$("p").click(function(){
					$(this).hide();
				});
			});
		</script>
	</head>
	<body>
		<p>如果您点击我，我会消失</p>
		<!-- 背景声明 -->
		<!-- 1、背景颜色 -->
		<!-- 2、背景图片 -->
		<div class="box">
		</div>
		
	</body>
</html>

test8.css

*{
	padding: 0;
	margin: 0;
}

.box{
	/* 设置背景图片的元素必须要有尺寸 */
	width:500px;
	height: 600px;
	border: 3px solid #0f0;  /* 边框 */
	/* 背景图片 */
	background-image: url(../img/巨星科技_05.png);
	/* 设置背景图片的平铺问题 */
	/* background-repeat:repeat（平铺）/repeat-x(平铺x轴)/repeat-y(平铺y轴)/no-repeat(不平铺) */
	background-repeat: no-repeat;
	/* 设置背景图片的显示位置 */
	/* background-position: 水平方向(px/%/left/right/center)  垂直方向(px/%/top/bottom/center) */
	background-position: center center;
	/* 设置背景图片的显示尺寸 */
	/* background-size: 水平方向尺寸(px/%)  竖直方向尺寸(px/%)/cover（等比放大缩小，但是有些部位会被遮挡）/contain（等比缩放，但是只要有一个方向盛满元素，就不在进行缩放 */
	background-size: 100% 100%;    /* 图片会拉伸 */
	
	/* 总写 */
	/* background: 背景图片的链接地址  平铺设置  背景图片的显示位置; */
	background: url(../img/巨星科技_05.png) no-repeat center center;
	
	background-size: contain;
	opacity: 0.3;   /* 透明度 */
}

运行效果：

三、全屏页面的编写

注意：全屏效果,不能直接写高度100%，因为body的宽度默认是浏览器的宽度，但是高度是由内容来撑开的，需要将其父级元素html，body都拿出来设定高度为100%

test9.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<link rel="stylesheet" type="text/css" href="css/test9.css"/>
	</head>
	<body>
		<div class="box">
			<div class="box_con">
				<!-- 标题 -->
				<div class="title">
					<h2><img src="img/6.png" alt=""></h2>
				</div>
				<!-- 文案 -->
				<div class="content">
					<p>回家湘餐饮管理创办于1999年，是一家经营特色湘菜为主的餐饮连锁企业，其经营范围包括饮食餐饮管理等。</p>
					<p>为进一步推动湘菜的发展，传播湘菜文化，迎合众多喜爱湘菜的美食家和消费者的需求，回家湘人经过十多年的努力，本着“诚信、务实、创新、服务”的经营理念，以美味的产品、稳定的品质、热情的服务、欢乐的笑容、亲切的招呼，赢得了无数消费者的心，同时也在珠三角赢取了强而稳定的市场，拥有了良好的口碑！</p>
					<p>回家湘餐饮管理作为一家正处于迅速成长中的民营餐饮企业，在企业发展的过程中，不断吸取先进的管理理念，管理模式由粗放、作坊式向规范化、现代化转变。“以人为本、诚信服务”是回家湘人始终不渝的追求，在经营管理过程中，始终秉承“顾客就是上帝”“员工就是家人”的理念，积极营造以人性化管理为核心的企业文化，并贯穿工作始终！</p>
					<p>随着餐饮行业的持续发展，回家湘人开始重视品牌优势的塑造，注重利用连锁经营进行扩张，做好成本控制，建立科学规范的管理体系，搞好企业文化的渗透和，以使回家湘的餐饮特色深入人心，传递　　特色湘菜的品牌魅力，使企业做强、做大！</p>
					<p>家的感觉，妈妈的味道，回家湘为你实现！！</p>
				</div>		
			</div>
		</div>

	</body>
</html>

test9.css

*{
	padding: 0;
	margin: 0;
}

/* 全屏效果,不能直接写高度100%，因为body的宽度默认是浏览器的宽度，但是高度是由内容来撑开的，需要将其父级元素html，body都拿出来设定高度为100% */
html,body{
	height: 100%;
}
.box{
	width: 100%;
	height: 100%;
	background: url(../img/2.png) no-repeat center center;
	background-size: 100% 100%;
	opacity: 0.8;
}

.box_con{
	width: 1200px;
	margin:0 auto;
}

.box_con .title{
	display: block;
	margin:0 auto;
}

.box_con .title img{
	display: block;  /* 转为块元素 */
	margin:0 auto 50px;
	padding-top:40px;
}

.box_con .content{
	height: 350px;
	padding-right: 120px;
}

.box_con .content p{
	height: 350px;
	float:right;
	writing-mode: vertical-rl;
	line-height: 2.5em;
	text-indent: 2em;
	color: #000000;
}

运行效果：