今天我遇到了一些特别的事情,涉及插入框阴影和https vs 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/

最佳答案

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,第二个图像不插入并且工作正常。由于图像的白色背景,您只是看不到插图阴影。

更新

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属性仅适用于定位的元素,这意味着relativeabsolutefixed。不适用于static元素(默认情况下)。

10-05 22:53
查看更多