1

我有一个正在开发的网站，其中一个要求是它不能使用任何客户端脚本（jQuery/JavaScript）。而且由于我对 CSS 不是很好，所以我有点卡在这里。

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

下面是它的样子，两个看起来像箭头的东西都是 2 个 png 文件：

在此处输入图像描述

有没有办法做到这一点？仅使用 1 个 div 和 2 个图像？没有 JavaScript，并且还保持跨浏览器兼容性（有一些例外，如 ie6<）？

4

4 回答 4

2

这适用于：IE9、Firefox、Chrome、Opera 和 Safari

代码：

    <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>
于 2012-07-22T17:33:45.700 回答
0

如果该块已固定height并width仅设置背景一个图像和paddings。如果它已固定width使用@Mr。外星人的解决方案。如果它有height水平固定裁剪图像并制作背景repeat-x。如果两者width都是height动态的，我建议无论如何都要使用 2-3 个额外的 div（我知道你想避免它），我不认为:before和:after更好一起玩。

于 2012-07-22T17:53:50.480 回答
0

Darcey 的解决方案非常好。盒子 div 里面有 3 个 div，中间 1 个用于内容，另外 2 个用于图像（具有 css 属性背景图像）。

如果您不想修改 html，可以尝试使用 css :before 和 :after 示例

于 2012-07-22T17:41:00.860 回答
0

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

当然gradients 不被 IE9 和更早版本支持，所以另一个解决方案是使用多个背景。

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

于 2012-07-22T17:43:33.877 回答