`
achun
  • 浏览: 306045 次
  • 性别: Icon_minigender_1
  • 来自: 河南郑州
社区版块
存档分类
最新评论

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

CSSXHTMLHTML 
阅读更多

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>
 

 

  • 大小: 282 Bytes
  • 9g.rar (21.8 KB)
  • 下载次数: 167
1
顶
0
踩
分享到：
| jQuery 插件 center
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics