【问题标题】: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

【问题讨论】:

标签: 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%;
}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2012-02-08
    • 2015-06-18
    • 2015-08-30
    • 2020-10-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-21
    相关资源
    最近更新 更多