获取页面卷曲透明图像以使用纯色背景色

我有一个带有透明区域的小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/

来源

2013-02-19 Zach Lysobey

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

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

<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,...'); 
}

来源

2013-02-19 16:59:58

嗯，对不起，把你通过这一切，但我想我是不是在我的岗位/例子不够具体;该页面的背景实际上并不是纯色，而是一张带纹理的图像，所以这种方法无效。如果我的背景*是稳定的，那么我应该让png不透明，并在背景中使用该颜色。 – 2013-02-19 17:02:09

另一种类似（和更简单）的方法将是你的而不是div，只使用一个标签与坚实的背景应用 - 绝对位于右下角。（但这仍然不能解决我的具体问题） – 2013-02-19 17:09:14

对不起@ zachL我编辑了我的答案，我希望它现在可以帮助你 – 2013-02-19 17:23:34

我的想法是使用PNG掩盖的整个角落DIV。让我们假设你的PNG是40x40px，左上部分是白色，而下部分是透明的。您可以使用

border-bottom-right-radius: 40px;

为“切断”的div的角落。因此，您可以看到背景图像。现在你把你的PNG放在它上面来掩盖丑角。

http://jsfiddle.net/Xd8CD/ （需要一个更好的PNG ...）

来源

2013-02-19 17:26:37 Raffael

嗯，我有点尝试过这一点，但也许你正在做点什么。给我一分钟来演示这个更多一点。 – 2013-02-19 17:28:11

+1，因为它看起来像这种方法_will_工作，但只有当我得到我的角落图像是一个正方形（所以我得让我的设计师朋友做一个更新）男人，我真的需要学习photoshop – 2013-02-19 17:42:09

在你的例如，你将不得不调整PNG来掩盖大圆角。 Tonis方法的优势在于额外的div不能包含内容，并且会根据百分比调整所有高度计算。 – Raffael 2013-02-19 17:42:50

获取页面卷曲透明图像以使用纯色背景色

回答

相关问题