html - 使页面 curl 的透明图像与纯色背景一起使用

Question

我有一个带有透明区域的小 png 我想充当纯色 div 的右下角，但我似乎无法想出一种使用 css 执行此操作的优雅方法。

我当前的 CSS:

div.example {
  border-radius: 9px;
  background-color: #fff;
  background-image: url(bottom-right-corner-peel.png);
  background-repeat: no-repeat;
  background-position: right bottom;
}

上述代码的问题在于div (#fff) 的背景色透过png 的透明部分显示，破坏了效果。我可以想到几个非常老套的方法来解决这个问题(例如 - 创建另一个 div(或使用 ::after)将一个元素放在有问题的 div 下方，并使用一些技巧来实现它，但一定有更好的方法，对吧？

---

查看[修订]演示:

http://jsbin.com/abacey/8/

Answer 1

这是您问题的解决方案:http://jsfiddle.net/promatik/uZFpZ/

我在 #content 旁边添加了一个 #content-bottom:

<div id="content">
    <h1>Corner Peel Demo</h1>
</div>
<div id="content-bottom">
    <div id="content-space"></div>
    <div id="content-corner"></div>
</div>

并在 CSS 中添加:

div#content{
    ...
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}
div#content-bottom {
    height: 30px;
    position: relative;
}
div#content-space {
    height: 27px;
    border-bottom-left-radius: 9px;
    background-color: #fff;
    margin-right: 42px;
}

div#content-corner {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 27px;
    width: 42px;
    background-color: transparent;
    background-image: url(data:image/png;base64,...');
}