底层图,浮在背景图上的图片和图片上的文本:三层
**方法一:将图片上的文本放入图片的div里面,然后定位。调bottom++。
方法二:将图片上的文本单独放一个div。然后使用top的负值将其浮在图片上。
下列使用方法一:
<div class="text-center banner_top">/*底层图:css引入的背景图 */
<div class="banner_join">
<img src="images/1-1.jpg" alt="topbanner"> /*浮在背景图上的图片:*/
<img src="images/1-2.png" class="join_button">/*图片上的文字*/
<a href="https://form.mikecrm.com/NraHsw"></a>
</div>
</div>
css:
.banner_top {
background:url(../images/1.jpg) no-repeat center center;
width: 100%;
text-align: center;
/*background-size: 100% 100%;这里的百分比是针对设置的宽高*/
background-size: cover;
}
.banner_join {
position: relative;
width: 960px;
margin: 0 auto;
}
.join_button,.banner_join a {
width: 148px;
height: 58px;
margin: 0 auto;
position: absolute;
left: 33%;
bottom: 28%;
}
给图片上的文本定位:
1.用div嵌套该文本;
2.给div 绝对定位,给文本(例子中是images/1-2.png)相对定位。
3.在文本中使用left.top等给它具体定位。
css中引入背景图,如果给它高度,然后size是100%,那这个百分比是根据这个高度来的。
.future {
background: url(../images/8.jpg) no-repeat center center;
width: 100%;
height:300px;
text-align: center;
background-size: 100% 100%; /*这里的百分比是针对设置的宽高*/
}
针对图片布局:外层div给它一个大小,然后图片给它100%即可
.text-center{
text-align: center;
width: 960px;/*手机最小屏幕宽度*/
}
.text-center img{
width: 100%;
display:block;/*消除图片之间的空隙*/
margin: 0 auto;
}