使用图像渲染CSS3插入阴影

Question

我想利用我正在处理的网站的新CSS3框阴影功能。 问题是，如果内部有img（边框在图像区域周围隐藏），Chrome 9.0.5和Opera 10无法正确渲染插入边框。

我知道box-shadow仍在进行中，但我希望浏览器能够完全支持它或完全忽略它。

<!doctype html>
<html>
  <head>
    <style>
        div {
            border: 1px solid black;
            width: 300px;
            height: 200px;
            overflow: hidden;

            // CSS3 inset shade
            -moz-box-shadow: inset 0 0 20px red;
            -webkit-box-shadow: inset 0 0 20px red;
            box-shadow: inset 0 0 20px red;
        }
    </style>
  </head>
  <body>
        <div>
            <img src="http://www.google.com/images/logos/ps_logo2.png" width="364" height="126" alt="" />
        </div>
  </body>
</html>

有人知道一些解决方法来正确渲染红色阴影吗？

谢谢！

编辑：我对答案很满意，但只是想添加一个实时链接来帮助其他人。 这里是

Answer 1

使用插入时，框阴影位于堆叠顺序的背景上方。 因此，div中的任何图像都将覆盖阴影。

根据W3C规范

在堆叠上下文和绘制顺序方面，元素的外部阴影直接绘制在该元素的背景下方，元素的内部阴影直接绘制在该元素的背景上方（在边框和边框图像下方，如果有的话）。

换句话说，Chrome和Opera正确地做到了（FTR，FF 3.6.13和Opera一样）。

如果您希望阴影与图像重叠，则根据您的需要，您可以选择几种不同的选项：

1. 将图像设置为div的background属性。
2. 绝对将div放在带有图像的div上，使其大小相同，并将阴影放在那里（不是真的推荐，因为它是复杂的并且添加了非语义标记）。
3. 确保图像的背景是透明的（这将允许阴影显示，但非透明像素仍将覆盖阴影）。
4. 请考虑使用border-image和gradient。 （这个也有点复杂，但是将渐变放在边框本身，你可以使用RGBA淡化为透明。）

Answer 2

有一个更好的解决方案 - 只需在你的img上设置这个CSS。

img {
  z-index: -1;
  position: relative
}

示例： http ： //trentwalton.com/2010/11/22/css-box-shadowinset/

Answer 3

使用伪元素将阴影应用于图像。 这样可以避免在标记中添加额外的，非语义的兄弟，无论其他元素的背景如何（与设置z-index: -1 ）都可以使用，并且不需要JavaScript。

简单的实例： http ： //jsfiddle.net/4qvzqajq/

OP的例子： http ： //jsfiddle.net/AWaVC/138/

假设这个标记：

<div class="container">
    <img src="http://stackoverflow.com/content/stackoverflow/img/apple-touch-icon.png" />
</div>

这个CSS将在div的内容（包括图像）上应用插入阴影：

.container {
    position: relative;
}
.container:after {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    content: '';
    -moz-box-shadow:    inset 0 0 5px #000000;
    -webkit-box-shadow: inset 0 0 5px #000000;
    box-shadow:         inset 0 0 5px #000000;
}

Answer 4

昨天我有一个单DIV和背景图像属性的解决方案。 如果我们正在讨论图像尺寸未知或不太清晰的动态网站，我们可能会使用JavaScript Image类。 真的，这不是“猴子扳手”，也不是关于设置正确宽度和高度的火箭科学。

加载JQuery看看这个：

<style type="text/css">
  #ribbon div {
    display: inline-block; /* no hacks about left-floating images */
    border: none;
    border-radius: 8px; /* just for test inset shadow with rounded borders */
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;

    // CSS3 inset shade
    -moz-box-shadow: inset 0 0 20px red;
    -webkit-box-shadow: inset 0 0 20px red;
    box-shadow: inset 0 0 20px red;
  }
</style>

<script type="text/javascript">
  $(function(){

    // Here's our images. We can load a list with AJAX.
    var sources = ['1.jpg','2.jpg','3.jpg'];
    var imgs = [];

    var ribbon = $('#ribbon'); // Image list container

    // Add images to the ribbon
    for (var i=0, len=sources.length; src=sources[i], i<len; i++) {

      var div = $('<div>'); // Create an empty DIV
      div.attr('id','thumbimg'+i); // Name our DIV for async access
      div.css('display','none'); // Make it hidden while loading the image
      div.appendTo(ribbon); // Add to container

      imgs[i] = new Image(); // Empty Image object
      imgs[i].id = 'img'+i; // Name it for DIV match

      // We can get the dimensions only after the image is loaded
      imgs[i].onload = function() {
        var myDiv = $('#thumb'+this.id); // Matching 'thumbimgX'
        myDiv.css({
          'display': '', // Clear display property = show hidden DIV
          'width': this.width + 'px', // Set DIV.width = Image.width
          'height': this.height + 'px', // Same for height
          'background-image': 'url('+this.src+')', // draw our image in background
          // Note the image already loaded and the div is inserted before
          // so picture just appears without lags
        });
      }

      // Load image
      imgs[i].src = src;
    }

  }
</script>

<body>
   ...
  <div id="ribbon"></div>
   ...
</body>

因此，我们可以显示具有各种嵌入阴影效果的图像列表：渐晕（

inset 0 0 60px rgba(0,0,0,0.8)

），按钮/冰箱磁铁（

inset -4px -4px 8px rgba(0,0,0,0.2), inset 4px 4px 8px rgba(255,255,255,0.8)

）无论你想要什么。 没有IMG标签，因此右键单击不会显示“保存图像”或“复制图像地址”选项。

ps oops，固定图像加载

Answer 5

负z-index解决方案的问题在于，如果图像后面有一个具有背景的元素，则图像会重叠。 因此，此解决方案仅适用于白色站点。 我的解决方案是将影子放在一个div ，这是img的兄弟。 这是div得到的position: absolute; 并且正好位于图像上方：

http://jsfiddle.net/E3hFM/

HTML：

<div class="teaserimage">
  <img src="http://placehold.it/300x200">
  <div class="shadow"></div>
</div>

SCSS：

.teaserimage {
    position: relative;
    float: left;
    img {
        vertical-align: middle; // to remove standard margin-bottom: 3px; of the image
    }
    .shadow {
        -webkit-box-shadow: inset 10px 10px 10px 0px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: inset 10px 10px 10px 0px rgba(0, 0, 0, 0.5);
        box-shadow: inset 10px 10px 10px 0px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 0px;
        width: 100%;
        height: 100%;
    }
}