html5+css/运用css的多图片背景进行一个网页拼图效果/案例演示

一、分析效果

1.结构：

由效果图分析，外层由一个大div包裹总体图片内容，再嵌套两个div，每个盒子使用多图背景的方式引入三张图像。

2.样式：

根据样式按照将图片素材拼接起来即可。

二、开始实现

1.打开Dreamweaver2021新建立一个html5格式文件，并修改title为"拼图效果"然后搭建起结构

2.使用嵌入的方法引入css样式。

<style>
	*{
		padding: 0;
		margin: 0;
		/*首先清除浏览器默认的边距的效果*/
	}
	.box{
		width: 604px;
		height: 454px;
		border: 5px #CCC solid;
		border-radius: 50px;
		margin: 50px auto;
		/*设置居中显示（左右自适应上下50px*/
	}
	.one{
		width: 604px;
		height: 227px;
		background-image:url("01.jpg"),url("02.jpg"),url("03.jpg");
		background-repeat: no-repeat;
		background-position: left,center,right;
		border-radius: 45px 45px 0 0;
	}
	.two{
		width: 604px;
		height: 227px;
		background-image:url("04.jpg"),url("05.jpg"),url("06.jpg");
		background-repeat: no-repeat;
		background-position: left,center,right;
		border-radius: 0px 0px 45px 45px;
	}
</style>

3.使用浏览器预览效果