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

问题描述：

我有一个我正在开发的网站，其中一个要求是它不能使用任何客户端脚本（jQuery/JavaScript）。而且因为我不是，非常适合CSS，所以我有点卡在这里。DIV边框顶部和底部的不同图像

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

下面是它应该是什么样子，这两个箭头看东西都是2个PNG文件：

enter image description here

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

答

这个工作在：IE9，火狐，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>

答

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

如果你不想修改你的HTML，你可以尝试用CSS玩：前和：后 Example

他说1 div和2图片.. – 2012-07-22 17:45:21

只有一个div，他应该尝试：before /：afer stuff，正如我所说的，但我认为3 div方法更安全的浏览器 – enTropy 2012-07-23 00:14:59

答

首先解决方法：只使用gradient小号。没有图像，没有额外的元素，甚至伪元素。

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

IE8及以上不支持多背景CSS3的方式，但你可以使用AlphaImageLoaderfilter作为后备这些浏览器。

答

如果块已固定height和width只设置背景图像和padding s。如果它已修复width请使用@Mr。 Alien的解决方案。并且如果已经修复了height作物图像，并且使背景repeat-x。如果width和height都是动态的，我会建议使用2-3个额外的div（无论如何，我知道你想避免它），我不认为玩:before和:after更好。

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

相关推荐