阴影大于背景图像[关闭]答案

【问题标题】：Shadow larger than the background image [closed]阴影大于背景图像[关闭]
【发布时间】：2014-08-10 05:25:34
【问题描述】：

当我尝试为缩略图边框图像添加阴影时遇到了这个问题。有没有办法解决？ :s

这是代码块：

#content .item{
 width: 285px;
 height: 240px;
 float: left;
 margin: 0 10px 10px 0;
 padding: 15px 0 0 15px;
 background: url(../images/thumbnail.png) no-repeat;
 background-size: 285px 240px;
 box-shadow: -5px -5px 10px #CCC;
}

http://jsfiddle.net/ju3hxjuu/4

【问题讨论】：

我猜阴影是在包裹缩略图的容器上
jsfiddle.net/ju3hxjuu/4 @Harsh 是的，这就是问题所在：/
嘿，这个jsfiddle.net/harshdand/ju3hxjuu/5

标签： html css background-image shadow

【解决方案1】：

您的问题是什么，请明确说明。

如果您谈论的是图像周围的白色边框 + 阴影。然后请注意，您刚刚使用的添加创建了那个白色边框，因为您的 div 比其中的图像大。如果您希望该阴影仅出现在您的图像周围，那么您必须删除填充。像这样：

#content .item{
 width: 285px;
 height: 240px;
 float: left;
 margin: 0 10px 10px 0;
 background: url(../images/thumbnail.png) no-repeat;
 background-size: 285px 240px;
 box-shadow: -5px -5px 10px #CCC;
}

【讨论】：

如果这不能解决您的问题，请粘贴 HTML 并明确说明您想要什么。
jsfiddle.net/ju3hxjuu/4 @AZT 是的，这就是我想要做的，但是通过删除填充，阴影确实会到达我想要的位置，但是它上面的图像不再以白色缩略图为中心.

【解决方案2】：

jsfiddle：http://jsfiddle.net/harshdand/ju3hxjuu/5/

你实际上不需要图像来创建缩略图背景

HTML

<div class="item">    
        <img src="http://i.imgur.com/t2cfwup.png" alt=""/>
</div>

CSS：

body{
    background-color: #EEE;
}
.item{
     width: 285px;
     height: 240px;
     float: left;
     margin: 10px;
     padding: 15px;
     background-color:white; 
     background-size: 285px 240px;
     box-shadow: 10px 10px 10px #CCC;
}
.item img{
width:100%;
}

【讨论】：