css3 box-shadow https 与 http

Question

我今天遇到了一些关于 inset box-shadows 和 https 与 http 的特殊情况。

使用 Chrome(版本 37.0.2062.120 m)，如果我在 img 上插入框阴影，只要该 img 的 URL 是 http(例如:http://somebodyelseswebsite.com/myimage.png)，它就可以正常工作。如果该图像使用 https(例如:https://thisotherguyswebsite.com/hisimage.png)，则不会显示插入的阴影。

这是安全问题还是 Google 的错误/疏忽？有人有什么想法吗？

<img style="width:150px; box-shadow:inset 0 0 0 5px #000" src="https://kfscdn.api.np.km.playstation.net/64924751177e14943eec338b1f02cb08a838321c2ed38d0dc546622311399dc5/48b8a11c7d5f31a1efd874e197d0e1b9/1410306322100.png"></img>
<br>
<img style="width:150px; box-shadow:inset 0 0 0 5px #000" src="http://static-resource.np.community.playstation.net/avatar/default/DefaultAvatar.png"></img>

http://jsfiddle.net/9TMdc/4/

Answer 1

Http 或 Https 不是问题，看这个:

http://jsfiddle.net/carloscalla/9TMdc/6/

我用两种方式调用它:

<img style="width:150px; box-shadow:inset 0 0 0 5px #000" src="http://static-resource.np.community.playstation.net/avatar/default/DefaultAvatar.png"></img>

<img style="width:150px; box-shadow:inset 0 0 0 5px #000" src="https://static-resource.np.community.playstation.net/avatar/default/DefaultAvatar.png"></img>

Http 和 Https 相同的图像，我看到了框阴影。问题是第一个图像有白色背景，第二个图像有透明背景。因此，您在第二张图片中看到了框阴影，但由于白色背景，在第一张图片中看不到。

看到第一张图片，我用 Http 和 Https 两种方式调用它，第一种使用 box-shadow: inset，第二种不使用 inset，但效果很好。由于图像的白色背景，您只是看不到嵌入阴影。

更新

http://jsfiddle.net/carloscalla/9TMdc/9/

我在包含您的图像的 div 中设置了背景色，这样您就可以看到图像的背景。第一个的背景颜色为白色，第二个是透明的。请记住，在 PNG 图像中，您可以使用透明背景色，而在 JPEG 图像中则不能。

更新

http://jsfiddle.net/carloscalla/9TMdc/10/

我包含了一个变通方法，可以在您的图像中设置 box-shadow: inset 背景颜色不同于透明。我将它包裹在一个 div 中，并将 z-index: -1 设置为您的图像，这样 div 就会出现在前面。请注意 position: relative 很重要，因为 z-index 属性仅适用于定位元素，即 relative、absolute 和 已修复。不适用于 static 元素(默认情况下)。