0

chrome 和 ie10 上的结果可以工作，但不能在 firefox 上工作。

我想在 div 的底部添加阴影背景

请看一下这个

http://jsfiddle.net/yokosatan/mv83a/

这是HTML的代码

<div class="box">
   <div class="logo">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTMLZg7HAU1G8n8ZKnOeai4EsUUtwyyWamco2hPHLjFx2Hl2X3mwQ" border="0"/>
   </div>
   <div class="name">Name</div>
</div>

和CSS代码

.box
{
  text-align:center;
  width:105px;
}
.name
{
  font-size:11pt;
  margin-top:8px;
  text-transform:uppercase;
}
.logo
{
  width:105px;
  height:105px;
  background:white;
  display: table-cell;
  vertical-align: middle;
  position:relative;
}
.logo:after
{
  content:url('http://s24.postimg.org/f1dompt4x/shadow_test.png');
  position:absolute;
  bottom:-15px;
  display:block;
  height:15px;
}
.logo img
{
  margin:0 auto;
  max-width:85%;
  width:85%;
  max-height:85%;
}

问题是如何做与 chrome 或即显示相同的结果。此外，它可能是对所有 Web 浏览器提供相同结果的其他解决方案。

谢谢

更新：我认为原因是我做展示

display:table-cell;

我改为显示块并且它可以工作，但我想让徽标垂直居中。我应该怎么办？

4

2 回答 2

2

而不是使用content: url();使用content: ' ';和使用background-image，它应该适合你

演示

.logo:after {
    content:' ';
    height: 15px;
    width: 100px;
    background-image: url('http://s24.postimg.org/f1dompt4x/shadow_test.png');
    position:absolute;
    top: 110px;
    display:block;
    background-repeat: no-repeat;
}

编辑：

由于您在使用 时遇到问题display: table-cell;，因此您可以display: block;改用并使用position: absolute;标签img，并使用top自left定义值将图像垂直居中设置。

演示

于 2013-06-27T06:40:52.670 回答
0

用作content“”并添加background

  .logo:after 
   {
      background:url("http://s24.postimg.org/f1dompt4x/shadow_test.png") repeat-x scroll center bottom transparent;
content:"";
position:absolute;
bottom:-15px;
display:block;
height:15px;
width:110px;
   }
于 2013-06-27T07:30:27.480 回答