一张图片的CSS自适应尺寸圆角方案
css圆角图片一直都是一个烦人的问题.
虽说css3被广泛支持后这个问题就不存在了.可谁知道要等到那一年.因此目前一个好的解决方案还是很有实际意义的.
网上解决的方法已经很多.我都不是很满意.
本来我以前也写过一个金字塔结构的方案,不过现在看来我同样也不满意,原因:图片太大.
今天我再次想找到一个新的解决方案,仔细看了一篇
一张背景实现自适应九宫格
其实我最早看到这个方法的时候,记得是老外写的,当时就觉得图片处理太复杂就没有考虑.
今天仔细看了他的结构发现,里面有一个很强的技巧,就是通过重叠错位的方法补齐平铺的图片空缺(说起来绕嘴,看结构和css就明白了).
我就想,能不能用这个技巧,把图片处理简单些,而且原文中用了绝对定位,这种方法在某些时候会让情况变得更复杂.能不能用content自动的把平铺部分撑起来.
经过一个下午的实验终于成功了(从某种意义上说应该是九宫文的简化版)
当然要做渐变的图片的话也是没有问题的,关于那些偏移量的计算公式就不写了,很容易看懂,另外就是这个应该可以和js配合做一个方便的设置偏移量的函数,回头再写吧.
代码如下:
关键点:给content设置一个背景色,当然设置背景图片也可以了.理论上既然边框都是图片的了,content背景没有理由是透明的
??