Question

我希望在div background-image结束后放置bottom以获得阴影效果。我没有使用伪元素，因为旧的IE不支持它们。那么有没有一种方法可以将它放在底部，而无需添加额外的非语义div。

我正在做的事情的链接＆amp;试图实现： http://jsbin.com/ebowom

CSS

.border_block {
    background: url("http://i53.tinypic.com/161f5af.png") no-repeat scroll center bottom  rgba(255, 255, 255, 0.60);
    border-radius: 10px 10px 10px 10px;
    height: 344px;
    margin: 0 auto;
    padding: 8px;
    width: 920px;
  }

  .main_block {
    background-color: #fff;
    height: 100%;
  }

HTML

<div class="border_block">
<div class="main_block">
Hello World
</div>
</div>

Answer 1

你可以做的一些事情：

查看PIE.htc并查看是否可以使用CSS而不是图像重现阴影（无论如何都是好主意）
使用ie8.js强制6和7渲染psuedo元素（虽然性能非常慢）
如果你正在使用jQuery，可以试试Psuedo Plugin。它有点hacky，因为它添加<span>类.before和.after类，所以我不是它的忠实粉丝 - 但性能优于ieX.js. （使用jquery 1.6进行测试，它仍然有效）
咬紧牙关并添加额外的包装div
最简单：让你的少数IE6和7用户“受苦”而没有阴影效果。

Answer 2

在这里：http://jsbin.com/oyozin

编辑：如果你想知道内部容器部分.. http://jsbin.com/oyozin/2

Answer 3

我最同意Wesley的第4点，咬紧牙关：用另一个包含边框的div包裹你的div。您将获得美丽的效果，只需很少的开销和干净的代码，可能适用于每个浏览器。

对于没有经验的人点击这个有趣的问题，它是这样的：

html 包含div：

<div class="border_block"><div> Content here ... </div></div>

css 看起来像：

   body { text-align: center; background-color: #a5a694;}

  // div with content and shadow
  .border_block {  
    background: url("http://i53.tinypic.com/161f5af.png") no-repeat scroll center bottom  rgba(255, 255, 255, 0.60);
    width: 920px;
    background-position: bottom;
    background-color: #a5a694;
    padding-bottom: 12px;
    margin: 0 auto;
  }


  // div for the actual content
  .border_block div{    
    background-color: #FFF;
    height: 344px;
    padding: 8px;    
    border-radius: 10px 10px 10px 10px;
    border: #CCC 8px solid;
  }

（请注意，IE8或更低版本不支持border-radius）

div结束后的背景图像

3 个答案: