css去掉ie网页png阴影

基础概念

CSS中的PNG阴影问题通常是指在Internet Explorer浏览器中，PNG图片的透明背景和阴影效果无法正确显示。这是因为IE浏览器对PNG图片的透明度支持不完善，尤其是在IE6和IE7中。

类型

解决PNG阴影问题的方法主要有以下几种：

使用滤镜（Filter）
使用JavaScript进行修正
使用条件注释针对IE浏览器进行特定样式设置

应用场景

这种方法主要应用于需要在IE浏览器中显示PNG图片并带有阴影效果的网页设计。

问题原因

IE浏览器对PNG图片的透明度支持不完善，导致PNG图片的阴影效果无法正确显示。

解决方法

方法一：使用滤镜（Filter）

<!DOCTYPE html>
<html>
<head>
<style>
  .png-shadow {
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path/to/your/image.png', sizingMethod='scale');
    background: none;
  }
</style>
</head>
<body>
  <img src="path/to/your/image.png" class="png-shadow" />
</body>
</html>

方法二：使用JavaScript进行修正

<!DOCTYPE html>
<html>
<head>
<script>
  function fixPNGShadow() {
    var images = document.getElementsByTagName('img');
    for (var i = 0; i < images.length; i++) {
      if (images[i].className.indexOf('png-shadow') !== -1) {
        images[i].style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + images[i].src + '", sizingMethod="scale")';
        images[i].style.background = 'none';
      }
    }
  }
  window.onload = fixPNGShadow;
</script>
<style>
  .png-shadow {
    /* Your styles here */
  }
</style>
</head>
<body>
  <img src="path/to/your/image.png" class="png-shadow" />
</body>
</html>

方法三：使用条件注释针对IE浏览器进行特定样式设置

<!DOCTYPE html>
<html>
<head>
<!--[if IE]>
<style>
  .png-shadow {
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path/to/your/image.png', sizingMethod='scale');
    background: none;
  }
</style>
<![endif]-->
<style>
  .png-shadow {
    /* Your styles here */
  }
</style>
</head>
<body>
  <img src="path/to/your/image.png" class="png-shadow" />
</body>
</html>

参考链接

通过以上方法，可以有效解决IE浏览器中PNG图片阴影显示不正确的问题。

页面内容是否对你有帮助？

有帮助

没帮助

可以在HTML/CSS中使用部分透明来制作光晕/阴影吗？

、、

首先，如何使图像具有部分透明度(我认为PNG可以做到这一点，但不知道如何做--我有photoshop，只需要说明？) 其次，如何在使用CSS的布局中使用该图像？我想我需要一些"PNG Hack“

浏览 0提问于2009-02-05得票数 1

3回答

有没有可能用当前的IE9测试版CSS来做文本阴影？

、、、

因此，FF和Chrome中的文本阴影是格子状的。例如，我有一个简单的网页，用于简单的视频流服务器。我在IE9中没有阴影(p{color: #000;text-shadow: 0px 1px 1px #fff;padding-bottom:1em} 所以我想--可能有一些JS的特殊CSS方式来为IE创建文本阴影？

浏览 0提问于2010-12-01得票数 1

回答已采纳

1回答

Internet Explorer 11无法识别特定于CSS3的属性

、、

我已经从IE8切换到IE11，但是我仍然不能使用CSS3属性。IE11不识别CSS3的特定属性，如边框半径和方框阴影。在开发人员工具中，它们没有复选框，并带有红色下划线。我发现的一个可能的原因是doctype html总是被注释掉，我假设是因为IE无法识别这些属性。

浏览 0提问于2015-04-22得票数 2

2回答

我设计了一个网页上的特色框，并使用CSS在底部添加了一个阴影。它在Chrome和Firefox上看起来不错，但当我在IE 11上检查时，它看起来不太好。 ? 上面的图片来自其他浏览器，下面的obe是IE 11上的外观。 ? 我使用下面的CSS代码添加了阴影： .service_group:hover .uk-box-shadow-bottom:before { position:中的纯黑阴

浏览 29提问于2021-10-09得票数 0

回答已采纳

2回答

网页在IE9和更早版本中显示

、

我制作了网页，并使用CSS3 (渐变、图像边框、文本阴影等)设置样式。我们的工作浏览器(IE9)完全毁了它的外观。你不知道如何在css中修复当浏览器低于IE10时，不要使用这组样式而是使用这组样式吗？

浏览 3提问于2014-05-27得票数 0

2回答

Jquery Fancybox阴影在IE7/IE8中不显示

、、

演示页面如下：正如您所看到的，除了IE7/IE8之外，每个浏览器的弹出窗口都有一个阴影。谁能告诉我怎样才能让阴影显示出来？

浏览 1提问于2011-10-31得票数 0

回答已采纳

4回答

IE中png文件的透明度

、、

我在css中设置了一个比内容部分稍大的背景图像，以便在它后面有一个在y方向重复的阴影，但在IE中它不显示透明度。我已经使用谷歌来解决这个问题，但没有幸运地在css中做了图像。CSS：width:854;margin-right:auto;background-image:url(shadow.png

浏览 0提问于2010-07-29得票数 0

回答已采纳

1回答

背景透明度被撕开导致CSS3派在IE中的方块阴影？

、

我在网络上搜索了很多东西，在IE中找到了一个盒子阴影，大多数人向我展示了他们在使用，但是它有一个透明背景的问题。我不想把另一张图片放在我的按钮上，我想让它们透明，边缘有一些阴影，但是像往常一样，铬- safari可以做IE不能做的...thing。我一直在想什么是最快和最简单的方式，把一些阴影到我的按钮边缘，而不让我的背景充满阴影效果。“我恨你IE!”

浏览 2提问于2011-12-02得票数 0

回答已采纳

5回答

如何在IE8中给底部的阴影加上白色？

、、

0px 0 blue inset, 0px 0 green inset; } 我想给一个选项卡阴影白色和边框绿色但在IE中，只有底部边框是有效的，框阴影是不起作用的，基本上我尝试给它两个边框，我的元素是在c#中创建的。

浏览 1提问于2013-03-29得票数 0

4回答

IE自定义谷歌地图上奇怪的黑点

、、

更新我很难得到关于电脑的具体细节，因为我的客户拍了这张截图，我无法复制这些黑点。删除死ImageShack链路

浏览 6提问于2010-03-11得票数 10

回答已采纳

2回答

IE中的PNG图像文件显示问题

、、

你好，我有一个问题，在显示的Png文件在IE。它在Firefox和其他浏览器中工作得很好，但是PNG文件在IE中显示了某种阴影。有什么解决方案可以解决这个问题吗？我已经使用这个css代码来解决这个问题，但仍然没有希望。我将感谢任何帮助。请..。

浏览 0提问于2010-07-10得票数 0

回答已采纳

3回答

ie6卷影问题

、、、

演示：ie6没有阴影(这只是为了显示在没有阴影之后的样子，但我们确实需要阴影)- ：最终的布局应该是这样的。

浏览 0提问于2011-09-05得票数 1

回答已采纳

1回答

IE 8中的fadeTo透明度问题

、、、、

我在结合使用fadeTo和IE8时遇到了一个让透明度变得不透明的问题。而不是淡入和淡出与透明度保持在我的背景图像(PNG)，有一个令人讨厌的黑色边界，否则透明度将是。'#bubblewrap li').mouseover(function() { $(this).show().css("opaci

浏览 5提问于2012-04-11得票数 1

2回答

IE9中的文本阴影滤镜

、

IE 9不支持文本阴影。怎样才能去掉这个黑点

浏览 2提问于2012-08-30得票数 0

4回答

背景图像在IE 8中不起作用

、、、

我已经附上了我的网站链接和下面的相关css代码，可以任何一个pl帮助解决这个问题。在主页的实时聊天部分。/banner/Chat-Banner.png') no-repeat top; margin:3px; }

浏览 0提问于2012-11-20得票数 0

回答已采纳

3回答

要获得像这样的跨浏览器布局(没有Javascript)，在左侧和右侧放置阴影并在高度上灵活，最好的解决方案是什么？

、

我希望做这样的事情：需要是轻量级的并与IE6兼容。

浏览 2提问于2010-06-22得票数 0

2回答

IE8 /7-显示div阴影/边框的问题

、、

我有一个客户网站的问题，在标题中有阴影或边界出现在div周围。我实际上并不想要这些东西，也不知道如何摆脱它们。这只发生在IE7 / 8中，IE9、火狐、Safari和Chrome都很好。

浏览 0提问于2012-01-31得票数 2

回答已采纳

2回答

ie8无法正常工作时的快速放置阴影css问题

、、

只有一个简单的问题，这个css代码不能在ie8中使用投影，你知道为什么它不能工作吗？

浏览 1提问于2011-05-27得票数 3

回答已采纳

7回答

确定CSS问题来源的最佳方法是什么

、、

我一直在做一个网页。这是我第一次实际尝试使用图像设计，然后使用适当的CSS布局，而不是表格。以我相对缺乏的经验，我如何寻找这个问题的相关修复。任何帮助都将不胜感激。

浏览 0提问于2008-10-27得票数 4

4回答

滚动滞后与CSS3框-阴影属性？

、、、

最近，我向页面的一个部分添加了一个box-shadow，使其具有与Mac应用程序相同的阴影边框效果。它看上去很棒，但我注意到在页面上上下滚动会使它滞后。我知道CSS3仍然是新的，但这是延迟的原因吗？阴影是软件呈现的还是什么的？当我将方框阴影应用于较小的元素时，它一点也不滞后。我只是想知道是否还有其他人经历过这种情况。在附带说明中，是否有人知道是否可以只将框阴影应用于元素的顶部、左侧和右侧，而不是底部？我试过1px -1px 10px，但它仍然显示底部的阴影。如果我继续减少第二次偏移量，它

浏览 3提问于2009-08-08得票数 12

回答已采纳

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

css去掉ie网页png阴影

基础概念

相关优势

类型

应用场景

问题原因

解决方法

方法一：使用滤镜（Filter）

方法二：使用JavaScript进行修正

方法三：使用条件注释针对IE浏览器进行特定样式设置

参考链接

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐