今天我遇到了一些特别的事情,涉及插入框阴影和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
属性仅适用于定位的元素,这意味着relative
,absolute
和fixed
。不适用于static
元素(默认情况下)。