一张图片的CSS自适应尺度圆角方案
日期：2014-05-17 浏览次数：20743 次
一张图片的CSS自适应尺寸圆角方案
css圆角图片一直都是一个烦人的问题.
虽说css3被广泛支持后这个问题就不存在了.可谁知道要等到那一年.因此目前一个好的解决方案还是很有实际意义的.
网上解决的方法已经很多.我都不是很满意.
本来我以前也写过一个金字塔结构的方案,不过现在看来我同样也不满意,原因:图片太大.
今天我再次想找到一个新的解决方案,仔细看了一篇
一张背景实现自适应九宫格
其实我最早看到这个方法的时候,记得是老外写的,当时就觉得图片处理太复杂就没有考虑.
今天仔细看了他的结构发现,里面有一个很强的技巧,就是通过重叠错位的方法补齐平铺的图片空缺(说起来绕嘴,看结构和css就明白了).
我就想,能不能
用这个技巧,把图片处理简单些
,而且原文中用了绝对定位,这种方法在某些时候会让情况变得更复杂.能不能用content自动的把平铺部分撑起来
.
经过一个下午的实验终于成功了(从某种意义上说应该是九宫文的简化版)
当然要做渐变的图片的话也是没有问题的,关于那些偏移量的计算公式就不写了,很容易看懂,另外就是这个应该可以和js配合做一个方便的设置偏移量的函数,回头再写吧.
代码如下:
关键点
:给content设置一个背景色,当然设置背景图片也可以了.理论上既然边框都是图片的了,
content背景没有理由是透明的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<title>一幅图片自适应尺寸CSS方案</title>
<style>
.mesh1,.mesh2,.mesh3,
.mesh4,.mesh6,
.mesh7,.mesh8,.mesh9{
background-attachment:scroll;
background-color:transparent;
background-position:0 0;
overflow:hidden;
}
.mesh1,.mesh7{float:left;_margin-right:-3px;}/*处理IE6的3像素BUGF*/
.mesh3,.mesh9{float:right;_margin-left:-3px;}
.mesh1,.mesh3,.mesh7,.mesh9{background-repeat:no-repeat;}
.mesh4,.mesh6{background-repeat:repeat-y;}
.mesh2,.mesh8{background-repeat:repeat-x;}
.meshborder .content{background-color:white;}/*关键点*/
/*下面的设置就看你的图片内容了*/
.skin1 .mesh1,.skin1 .mesh2,.skin1 .mesh3,
.skin1 .mesh4,.skin1 .mesh6,
.skin1 .mesh7,.skin1 .mesh8,.skin1 .mesh9{
background-image:url(skin.png);/*这里是图片地址*/
_background-image:url(skin.gif);/*为了兼容IE6做的GIF*/
}
.skin1 .mesh1{
background-position:-9px -9px;
height:9px;
width:9px;
}
.skin1 .mesh2{
height:9px;
}
.skin1 .mesh2 .mesh2{
background-position:18px 0px;
}
.skin1 .mesh3{
background-position:-18px -9px;
height:9px;
width:9px;
}
.skin1 .mesh7{
background-position:-9px -18px;
height:9px;
width:9px;
}
.skin1 .mesh8{
background-position:0px -27px;
height:9px;
}
.skin1 .mesh8 .mesh8{
background-position:18px -27px;
}
.skin1 .mesh9{
background-position:-18px -18px;
height:9px;
width:9px;
}
.skin1 .mesh4{
padding-left:9px;
}
.skin1 .mesh4 .mesh4{
background-position:0px -18px;
margin-left:-9px;
}
.skin1 .mesh6{
background-position:right 0;
padding-right:9px;
}
.skin1 .mesh6 .mesh6{
background-position:right -18px;
margin-right:-9px;
}
</style>
</head>
<body>
<div class="meshborder skin1">
<div class="mesh1"></div>
<div class="mesh3"></div>
<div class="mesh2">
<div class="mesh2"></div>
</div>
<div class="mesh4">
<div class="mesh4">
<div class="mesh6">
<div class="mesh6">
<div id="login" class="content">
可以自适应尺寸啦<br>
可以自适应尺寸啦<br>
可以自适应尺寸啦<br>
</div>
</div>
</div>
</div>
</div>
<div class="mesh7"></div>
<div class="mesh9"></div>
<div class="mesh8"><div class="mesh8"></div></div>
</div>
</body>
</html>
?
?
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
