png的CSS背景與transmitransparancies transparant在梯度顯示白色背景
[英]CSS background of png with semitransparancies transparant on a gradient shows a white background
問題描述
如果你用Android瀏覽器看這個小提琴（ http://jsfiddle.net/5ajYD/ ），你會看到組成花朵的PNG有白色背景。
在所有其他瀏覽器上，它顯示完全正常，除了Android瀏覽器。 我已經搜索過這個問題，但我唯一能找到的是png綁定問題並且與Android應用程序編程有關。
這讓我想起了MSIE 6對透明圖像的問題，我發現這種情況很奇怪。
有沒有人知道在Android瀏覽器上修復此問題？ 由於不同瀏覽器的梯度差異，我無法使用非透明背景。
到目前為止我嘗試過的：
- 我已經嘗試過使用位於0px 0px位置的“多個”背景，但這樣做並不起作用
- 我已經嘗試用鮮花添加漸變到div，但是也失敗了並且在其他瀏覽器中破壞了。
我覺得這種問題出現在現代瀏覽器上非常神秘......即使是諾基亞n95也是如此......
我正在測試的Android版本/發現這個是android 2.3.4（索尼愛立信Xperia Arc S LT18i）
這就是我在手機上的android瀏覽器中看到的小提琴
2 個解決方案
解決方案1
0 2012-07-11 18:13:58
使用HTML5 Canvas創建alphaJPEG ，這是一個在具有alpha通道的等效PNG下分層的JPEG。
<head>
<style>img[data-alpha-src]{visibility: hidden;}</style>
</head>
<body>
<img src="image.jpg" data-alpha-src="alpha.png" />
<!--...-->
<script src="ajpeg.js"></script>
</body>
ajpeg.js
(function() {
var create_alpha_jpeg = function(img) {
var alpha_path = img.getAttribute('data-alpha-src')
if(!alpha_path) return
// Hide the original un-alpha'd
img.style.visiblity = 'hidden'
// Preload the un-alpha'd image
var image = document.createElement('img')
image.src = img.src
image.onload = function () {
// Then preload alpha mask
var alpha = document.createElement('img')
alpha.src = alpha_path
alpha.onload = function () {
var canvas = document.createElement('canvas')
canvas.width = image.width
canvas.height = image.height
img.parentNode.replaceChild(canvas, img)
// For IE7/8
if(typeof FlashCanvas != 'undefined') FlashCanvas.initElement(canvas)
// Canvas compositing code
var context = canvas.getContext('2d')
context.clearRect(0, 0, image.width, image.height)
context.drawImage(image, 0, 0, image.width, image.height)
context.globalCompositeOperation = 'xor'
context.drawImage(alpha, 0, 0, image.width, image.height)
}
}
}
// Apply this technique to every image on the page once DOM is ready
// (I just placed it at the bottom of the page for brevity)
var imgs = document.getElementsByTagName('img')
for(var i = 0; i < imgs.length; i++)
create_alpha_jpeg(imgs[i])
})();
In the head element I linked to FlashCanvas:
<!--[if lte IE 8]><script src="flashcanvas.js"></script><![endif]-->
... and I threw in this to avoid a flicker of the un-alpha’d JPEG:
解決方案2
0 已采納 2012-12-05 13:49:17
我有一個很大的面孔時刻。
我已經和它斗爭了兩個月了，我根本無法弄清楚邏輯。 問題是在econtainer元素中它有一個參數：width：100％。
會發生的是它只將寬度渲染到視口的實際頁面寬度。
因此，如果移動設備上的瀏覽器屏幕寬度為480px，則將寬度設置為480px，渲染480px的漸變，而不是在向側面滾動時重新渲染。
通過添加最小寬度：1200px來解決問題; 現在它渲染得恰到好處！
謝謝大家對此進行調查......
CSS中具有透明背景的鋸齒狀邊緣
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.