Question

！For example, look at how it's done here

我想用CSS实现这样的目标。怎么可能这样做？

我喜欢黄色背景看起来像是3d。

Answer 1

嗯，不能说我有最好的解决方案，但这是我解决问题的方法。

一种方法是切片背景图像，并定位它们以获得所需的视觉效果。在PhotoShop（或您选择的图像编辑器）中创建资源，然后将其导出为碎片。一点绝对定位，你可以有一个横幅，可以在大多数浏览器上工作而无需大量工作。这虽然不是一个特别有趣的方法（并且不需要太多解释），所以让我提出别的建议。

第二种方式是仅使用CSS的解决方案，使用:after伪类和CSS三角形（如果您想要阅读更多关于三角形的信息，here's a link）。尝试分解结构，这样你就可以很好地了解HTML的样子 - 我将它分解为正文，主要div（白色），横幅区域和横幅的右/左边缘。在代码中（注意我省略了主体）：

<body>
    <div class="main">
        <p>Some content</p>
        <div class="banner">
            <span>I'm a banner!</span>
            <div class="left-edge"></div>
            <div class="right-edge"></div>
        </div>
    </div>
</body>

现在，CSS比简单的背景图像和颜色更复杂。我的方法有效，但其他人肯定会写一些更整洁的东西。尽管如此，这是我想出的（有一些替代值，如宽度，高度和颜色）：

body {
    background:#CCCCCC;
}
.main {
    background:#FFFFFF;
    width:600px;
    margin:0 auto;
    height:100%;
}
.banner {
    width:100%;
    height:100px;
    background:#AAAAAA;
    position:relative;
}
.left-edge {
    background:#AAAAAA;
    position:absolute;
    width:20px;
    height:100%;
    left:-20px;
    top:0;
}
/* Triangle left */
 .left-edge:after {
    width:0;
    height:0;
    border-left:20px solid transparent;
    border-right:0 solid transparent;
    border-top:20px solid #777777;
    content:"";
    position:absolute;
    left:0;
    bottom:-20px;
}
.right-edge {
    background:#AAAAAA;
    position:absolute;
    width:20px;
    height:100%;
    right:-20px;
    top:0;
}
/* Triangle right */
 .right-edge:after {
    width:0;
    height:0;
    border-left:0 solid transparent;
    border-right:20px solid transparent;
    border-top:20px solid #777777;
    content:"";
    position:absolute;
    right:0;
    bottom:-20px;
}

这背后的关键元素是绝对定位的边缘元素（位于横幅右侧/左侧宽度的负距离），它们具有与横幅相同的背景颜色，以便看起来可以扩展它。每个:after元素都是造成虚假3D效果的原因;它们中的每一个都会产生一个三角形，它被设置为与横幅不同的颜色。三角形定位使得它看起来像横幅围绕主div，创建3D效果。

这是一个JSFiddle，可以向您展示代码演示。

希望这有帮助！同样，这肯定不是唯一的方法，但它确实解决了你的问题。如果您有任何问题，请告诉我，我很乐意尝试进一步提供帮助。

如何在CSS中重叠3d背景？

1 个答案: