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>

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

谢谢！

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

Answer 1

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

根据W3C Specs

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

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

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

将图像设置为div的background属性。
绝对将div放在带有图像的div上，使其大小相同，并将阴影放在那里（不是真的推荐，因为它是复杂的并且添加了非语义标记）。
确保图像的背景是透明的（这样可以显示阴影，但不透明的像素仍会覆盖阴影）。
请考虑使用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和background-image属性的解决方案。如果我们正在讨论图像尺寸未知或不太清晰的动态网站，我们可能会使用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标签，因此右键单击不会显示“保存图像”或“复制图像地址”选项。

P.S。哎呀，固定图像负载

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%;
    }
}

使用图像渲染CSS3插入阴影

5 个答案: