獲取頁面捲曲透明圖像以使用純色背景色

我有一個帶有透明區域的小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

獲取頁面捲曲透明圖像以使用純色背景色

回答

相關問題