Question

我有一个我正在处理的网站，其中一个要求是它不能使用任何客户端脚本（jQuery / JavaScript）。因为我不是很好用CSS，所以我有点卡在这里。

我有一个简单的div，应该有一个“边框图像”。但是我不能使用CSS border-image，因为它不适用于IE（已经过测试），而且我无法获得两个不同的顶部和底部图像来处理background-image: - 所以现在我想知道我能做些什么......

下面是它应该是什么样子，箭头外观都是2个png文件：

enter image description here

有没有办法实现这个目标？仅使用1个div和2个图像？没有JavaScript，并且还保持跨浏览器兼容性（有一些例外，比如ie6＆lt;）？

Answer 1

适用于：IE9，Firefox，Chrome，Opera和Safari

<强> CODE：

    <style>
      #Container {
        width: 400px;
        height: 400px;
        margin-left: auto;
        margin-right: auto;
        border:1px solid #000000;
      }


      .boxTop {
        position: relative;
        left: 100;
        top: 100;
        width: 200px;
        height: 10px;
        background-color:#00CC00;
        /*place background image css code here and remove line above*/
      }

      .box {
        position: relative;
        left: 100;
        top: 100;
        width: 200px;
        height: 200px;
        background-color:#CC0000;
      }

      .boxBtm {
        position: relative;
        left: 100;
        top: 100;
        width: 200px;
        height: 10px;
        background-color:#0000CC;
        /*place background image css code here and remove line above*/
      }
    </style>

    <div id="Container">
        <div class="boxTop"></div>
        <div class="box"></div>
        <div class="boxBtm"></div>
    </div>

Answer 2

达尔西的解决方案非常好。盒子里面有3个div，中间一个用于内容，另外两个用于图像（带有css属性background-image）。

如果您不想修改html，可以尝试使用css：before和：after Example

Answer 3

第一个解决方案：只使用 gradient s 。没有图像，没有额外的元素甚至伪元素。

当然，IE9及更旧版本不支持gradient，因此另一种解决方案是使用多个背景。

IE8及更早版本不支持CSS3方式的多种背景，但您可以使用AlphaImageLoader filter作为这些浏览器的后备广告。

Answer 4

如果该块已修复height而width只设置了背景图像和padding s。如果已修复width使用@Mr。外星人的解决方案。如果它已经固定height裁剪图像，并制作背景repeat-x。如果width和height都是动态的，我建议使用2-3个额外的div（我知道你想避免它），我不认为玩:before和{{ 1}}更好。

DIV边框顶部和底部的不同图像

4 个答案: