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;
我改变为显示块并且它的工作,但我想使徽标垂直居中。 我该怎么办?
答案 0 :(得分: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
使用自定义值将图像垂直设置在中间。
答案 1 :(得分: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;
}