一张图片的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>

一张图片的CSS自适应尺寸圆角方案相关推荐

CSS自适应宽度圆角按钮
CSS自适应宽度圆角按钮,背景图要使用满足最长按钮的宽度,然后通过两个标签a, span,一个通过背景图的左对齐,一个通过背景图的右对齐. <!DOCTYPE html PUBLIC " ...
css什么是自适应布局,css 自适应布局阮一峰
转载一篇文章: 自适应网页设计(Responsive Web Design) 作者: 阮一峰移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小 ...
CSS移动端适配方案
文章目录移动端适配移动端适配介绍视口的介绍布局视口和视觉视口理想视口移动端适配方案 rem适配方案基本介绍单位换算 vw适配方案移动端适配移动端适配介绍移动互联网的快速发展,让人 ...
不使用border-radius，实现一个可复用的高度和宽度都自适应的圆角矩形
现在css3支持圆角矩形,但是为了兼容性问题,虽然比较麻烦,但还是有必要了解一下以下方法. 在一个div内,包含8个div,控制这个8个div的height.margin以及border属性值,以达到 ...
纯CSS样式实现圆角边框
圆角应用的比较广泛,比如说一些说明的div,或者模块的div,圆角的button等. 公司的页面一般是用图片实现的,坑爹的是这次的图片整个边框的上面或整个都是一个图片,我现在要调整大小受到图片的限制了 ...
ie8浏览器html圆角问题,IE7,IE8浏览器CSS实现正圆角效果代码
圆角效果以前用的是图片实现现在我们来用css实现了,下面来看一篇非常详细的关于IE7,IE8浏览器CSS实现正圆角效果代码吧,希望文章能够帮助到各位朋友. 一.关于IE7, IE8不支持CSS3 bo ...
纯CSS实现蓝色圆角下拉菜单
代码简介: 这个菜单没有使用任何的图片,完全是用CSS实现的,包括圆角效果也同样是,而且还考虑了多浏览器的兼容性,可以说非常不错,既兼容性好,又外观漂亮,下拉导航菜单目前比较流行,好好感觉一下本款菜单 ...
纯CSS实现漂亮圆角阴影边框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
html编写气泡对话框,HTML+CSS入门纯CSS手写圆角气泡对话框
本篇教程介绍了HTML+CSS入门纯CSS手写圆角气泡对话框,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 嗯--我们设计师强烈要求一定要圆角!圆角的气泡对话框,不要那 ...

一张图片的CSS自适应尺寸圆角方案

一张图片的CSS自适应尺寸圆角方案相关推荐

最新文章

热门文章