相关资料：
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
CSS 背景
CSS3 background-size 属性
开发中遇到一个问题，设计做好了一个图要转换成html，有些设计图的效果很好，用代码实现比较麻烦，所以需要使用设计的切图作为背景，但是要在这个背景上添加些交互，比如点击按钮的地方要响应，但由于网页所展示的宽高都不一致，导致布局交互部分时容易错乱
效果图如下：
xxxx
要吧这一整张图作为一个背景，然后再去充值的地方添加响应操作
一、使用图片背景
- 1.1、用图作为背景：直接使用css的background：url(xxxx)的方式，为了需要平铺拉伸沾满整个区域，设置css如下
<style type="text/css">
.box{
background-image: url('xxx'); /*背景图片地址*/
background-repeat: no-repeat;/*背景图片不重复*/
background-size: cover;/*背景图片拉伸铺满*/
width:100%; /* 宽度为100%；*/
height: 93.2vw; /*原图宽高比为100：93.2，所以高度为整个窗口宽度的93.2%*/
}
</style>
<div class="box"></div>
- 1.2、用img作为背景，然后用div设置宽度和高度都和img的宽高一致，并且设置div的margin-top为高度的负值，代码如下：
<style type="text/css">
.box-bg{
width:100%; // 宽度为100%；
height: auto;
}
.box-container{
width:100%; /*宽度为100%；*/
height: 93.2vw;/* 原图宽高比为100：93.2，所以高度为整个窗口宽度的93.2%*/
margin-top:-93.2vw;/*设置网上移动高度的位置，则刚好与背景图片重合在一起*/
}
</style>
<div>
<img class='box-bg' src='xxx'/>
<div class='box-container'></div>
</div>
二、给图片相应位置添加相应
根据本图的特点，使用flex竖直布局分成5行，每一行都设置flex-grow:1平分高度，然后再在每一行设置一个button来响应事件，button位于右侧就可以了
<style type="text/css">
.pay-btn-rows{
display: flex; /*flex布局*/
flex-direction: column;/*竖直方向*/
justify-content: center;/*竖直居中*/
align-items: flex-end;/*水平位于右侧*/
}
.pay-btn{
flex-grow: 1;/*每一行的高度平分*/
width: 29%;/*设置宽度*/
margin-right: 3%;/*设置距离右侧距离*/
background-color: transparent;/*按钮透明*/
}
</style>
<script type="text/javascript">
function say(money){
alert(money)l
}
</script>
<div class="pay-btn-rows">
<div class='pay-btn' onclick="say(288)"></div>
<div class='pay-btn' onclick="say(488)"></div>
<div class='pay-btn' onclick="say(688)"></div>
<div class='pay-btn' onclick="say(888)"></div>
<div class='pay-btn' onclick="say(1288)"></div>
</div>
网友评论