2-9的问题,怎么让背景图片 覆盖到别的图片上面

2-9的问题,怎么让背景图片 覆盖到别的图片上面

这个作业我都做晕了。。。麻烦帮忙看下

http://img1.sycdn.imooc.com/climg//59c383c00001d01c14310764.jpg

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Career Builder</title>

<style type="text/css">

.gallery .g-top .g-img,.g-zushi1{

width: 25%;

float: left;

}

.gallery .g-top2 .g-img2,.g-zushi2{

width: 25%;

float: left;

}


.gallery .g-top .g-zushi1{

height: 396px;

background: url(images/background.png);

color: #fff;

}

.gallery .g-top2 .g-zushi2{

height: 396px;

background: url(images/background2.png) ;

color: #fff;

}

h2{

margin-top:20px;

margin-left: 50px;

margin-bottom: 15px;

}

.gw1{

width: 80%;

margin-left: 50px;

font-size: 14px;

line-height: 1.8em;

margin-bottom: 15px;

}

.gw2{

width: 80%;

margin-left: 50px;

font-size: 12px;

line-height: 1.8em;

color: #D8D8D8;

}

.bt3{

font-size: 16px;

width: 100px;

height: 50px;

background-color: #000;

color: #fff;

margin-top:50px;

border: 1px solid #000;

margin-left: 40%;

}

.bt3:hover{

cursor: pointer;

border: 1px solid #000;

background-color: #fff;

color: #000;

}

</style>

</head>

<body>

<div class="header">

</div>

<div class="banner">

</div>

<div class="about">

</div>

<div class="gallery">

<div class="g-top">

<div class="g-img">

<img src="images/b1.jpg">

</div>

   <div class="g-zushi1">

    <h2>Library</h2>

    <div class="gw1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

    <div class="gw2">Lorem Ipsum has been the industry dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>

    <button class="bt3">EXOLORE</button>

   </div>

   <div class="g-img">

<img src="images/b2.jpg">

</div>

   <div class="g-zushi1">

    <h2>Library</h2>

    <div class="gw1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

    <div class="gw2">Lorem Ipsum has been the industry dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>

    <button class="bt3">EXOLORE</button>

   </div>

</div>

<div class="g-top2">

   <div class="g-zushi2">

    <h2>Library</h2>

    <div class="gw1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

    <div class="gw2">Lorem Ipsum has been the industry dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>

    <button class="bt3">EXOLORE</button>

   </div>

   <div class="g-img2">

<img src="images/b4.jpg">

</div>

   <div class="g-zushi2">

    <h2>Library</h2>

    <div class="gw1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

    <div class="gw2">Lorem Ipsum has been the industry dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>

    <button class="bt3">EXOLORE</button>

   </div>

   <div class="g-img2">

<img src="images/b4.jpg">

</div>

</div>

</div>

<div class="footer"></div>

</body>

</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
卡布琦诺 2017-09-21 18:34:48

不是很懂你的意思,为什么要让图片覆盖到背景上?这里实现的效果:建立一个大盒子,宽度设置100%,然后平均分成4份,然后在每一份里面添加图片或者内容即可。祝学习愉快!

  • 提问者 魏妮宝贝 #1
    蓝色的色块的旁边不是有个箭头的边缘要叠在旁边的图片上面吗?
    2017-09-21 22:08:36
  • 卡布琦诺 回复 提问者 魏妮宝贝 #2
    这个可以使用绝对定位,然后设置层级和位移量,将其显示在需要的位置即可,祝学习愉快!
    2017-09-22 09:33:01
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师