为了账号安全,请及时绑定邮箱和手机立即绑定

如何让一个div覆盖另一个div的一部分?各位大神教我

/ 猿问

如何让一个div覆盖另一个div的一部分?各位大神教我

http://static.mukewang.com/img/59ae40940001bd6501000042.jpg

http://static.mukewang.com/img/59ae4094000190fe01000042.jpg用这两个图片做出类似下面的效果:http://static.mukewang.com/img/59ae40ee0001bf5504550046.jpg


查看完整描述

6 回答

已采纳
?
FSYu
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #container div {
            display: inline-block;
        }
    </style>
</head>

<body>
        <div id="container">
        <div class="will">
            <img src="img/will.jpg" alt="">
        </div>
        <div class="did">
            <img src="img/did.jpg" alt="">
        </div>
        <div class="will">
            <img src="img/will.jpg" alt="">
        </div>
                <div class="did">
                        <img src="img/did.jpg" alt="">
                </div>
                <div class="will">
                        <img src="img/will.jpg" alt="">
                </div>
                <div class="did">
                        <img src="img/did.jpg" alt="">
                </div>
            </div>

<script>
        var num = 999;
        var oDivs = container.getElementsByTagName("div");
        for (var i = 0; i < oDivs.length; i++) {
            num--;
            oDivs[i].style.position = "relative";
            oDivs[i].style.zIndex = num;
            oDivs[i].style.marginLeft = "-30px";
            oDivs[0].style.marginLeft = "0px";
        }
</script>
</body>

</html>

//static.mukewang.com/img/59ae69f30001c74805130074.jpg

你看这个是你想要的吗?其实这个东西不用图片也可以做的,你用图片有局限性

查看完整回答
1 反对 回复 2017-09-05
  • 夜尽天明_重楼
    夜尽天明_重楼
    这个不用图片的话怎么做呢????大神!求教
  • FSYu
    FSYu
    这一个元素是由一个长方形div,一个菱形div还有一个圆形div组成,菱形div实现网址http://blog.sina.com.cn/s/blog_4a71608901013d3l.html,圆形的就是border-radius,这样长短大小比较好控制,图片的大小改变的话容易让图片变得特别丑
  • FSYu
    FSYu
    这一个元素是由一个长方形div,一个菱形div还有一个圆形div组成,菱形div实现网址http://blog.sina.com.cn/s/blog_4a71608901013d3l.html,圆形的就是border-radius,这样长短大小比较好控制,图片的大小改变的话容易让图片变得特别丑
点击展开后面1
?
慕尼黑的错觉

设置图层z-index,完美解决,不懂的加我QQ.526144052

查看完整回答
1 反对 回复 2017-09-05
?
属于码农的生活

这个JavaScript切换背景可以做吗 貌似是可以的

查看完整回答
反对 回复 2017-09-06
?
落叶1111

用定位,

查看完整回答
反对 回复 2017-09-06
?
mukeweb前端

这个UI也是任性

查看完整回答
反对 回复 2017-09-05
?
橋本奈奈未

css画个三角形覆盖吧,尽量避免使用定位

查看完整回答
反对 回复 2017-09-05

添加回答

回复

举报

0/150
提交
取消
意见反馈 邀请有奖 帮助中心 APP下载
官方微信