CSS情况图拉伸实际效果适配FF/Chrome/IE等流行访问

日期:2020-09-23 类型:科技新闻 

关键词:在线网页制作,建网页,个人简介网页制作,简单网页,建立网页

信各位1定碰到过这类状况,按钮做为DIV的情况图来显示信息,具体上有好几个这样的按钮,并且DIV中的文本,也便是按钮上要显示信息的文本內容和个数都不确定,这类状况下就必须用情况照片拉伸实际效果来解决了,只需做1个按钮照片,做为DIV的情况图时伴随着DIV的宽度或高宽比自融入就OK了。在网上也找过,但兼容问题IE或有bug,下面贴出自己亲测编码,适配流行访问器,包含Firefox、Chrome和 IE 等流行访问器(IE应用滤镜实际效果完成):

拷贝编码
编码以下:

.btn_bg {
width:150px;
height:50px;
background-image:url(./btn.png);
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
-moz-border-image: url(./btn.png) 0;
background-repeat:no-repeat\9;
background-image:none\9;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./btn.png', sizingMethod='scale')\9;
}

界定好上述CSS后,便可以在网页页面中应用了,比如:

拷贝编码
编码以下:

<div class="btn_bg"></div>

btn_bg款式中:width和height界定了情况图默认设置的宽高,倘若这个不确定义而且引入该款式的DIV也不确定义宽度,那末情况图的宽度会拉伸至访问器的宽度,此外能够特定DIV的宽度来拉伸情况图,如:

拷贝编码
编码以下:

<div class="btn_bg" style="width:300px"></div>。

仔细的你会发现,最终3行编码每行款式后都加了 \9 这是特定在IE8及下列访问器中的款式。