我有一個帶有透明區域的小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下面的元素中,並使用一些技巧使其工作,但必須有更好的方法,右
查看[修訂]演示:
嗯,對不起,把你通過這一切,但我想我是不是在我的崗位/例子不夠具體;該頁面的背景實際上並不是純色,而是一張帶紋理的圖像,所以這種方法無效。如果我的背景*是穩定的,那麼我應該讓png不透明,並在背景中使用該顏色。 – 2013-02-19 17:02:09
另一種類似(和更簡單)的方法將是你的而不是div,只使用一個標籤與堅實的背景應用 - 絕對位於右下角。 (但這仍然不能解決我的具體問題) – 2013-02-19 17:09:14
對不起@ zachL我編輯了我的答案,我希望它現在可以幫助你 – 2013-02-19 17:23:34