以实现一张图片双面翻转为例：
方法一：
1、实现CSS样式的方法代码如下。
2、实现前端布局的方法代码如下。
3、实现图片翻转CSS样式代码如下。
方法二：
1、实现正反面效果的HTML的方法代码如下。
2、实现CSS样式的方法代码。
3、然后实现竖向翻转的方法代码如下。
可以在CSS里面用background-image:url(你的图片地址)。这样来加入图片，展现到网页中。
<div id="bgimg"></div>
#bgimg {
background: #333 url(图片路径) center center no-repeat
}
第一个参数，图片底层的背景颜色，第二个参数，图片路径，第三个参数，图片上下的相对位置（其他参数left,right），第四个参数，图片左右的相对位置（top,bottom），第五个参数，图片的重复（其他参数 repeat,repeat-x,repeat-y）
扩展资料：
css背景图片代码：
{background-image: url(url)|none}；指定要使用的一个或多个背景图像
例子代码：
<html>
<head>
<meta charset="UTF-8">
<title>背景图片</title>
<style>
body{background:#ddd}
.div1{
width:300px
height:150px
background-image:url(2.jpg)
}
</style>
</head>
<body>
<div>背景图片</div>
</body>
.img-rounded {border-radius: 12px
transition: opacity 0.5s ease 0s
max-width: 100%
}
.img-no-padding {
padding: 0
}
