CSS3水平翻转样式和background-size兼容问题

mac2022-07-05 31

一、水平翻转和垂直翻转：第一种：随着现代浏览器对CSS3的支持愈发完善，对于实现各个浏览器兼容的元素的水平翻转或是垂直翻转效果也就成为了可能。相关的CSS代码如下： /*水平翻转*/ .flipx { -moz-transform:scaleX(-1); -webkit-transform:scaleX(-1); -o-transform:scaleX(-1); transform:scaleX(-1); /*IE*/ filter:FlipH; } /*垂直翻转*/ .flipy { -moz-transform:scaleY(-1); -webkit-transform:scaleY(-1); -o-transform:scaleY(-1); transform:scaleY(-1); /*IE*/ filter:FlipV; } 第一种兼容性好；第二种，就目前而言，对于基于webkit核心的浏览器，如Chrome以及Safari，实现元素的垂直翻转或是水平翻转也可以使用如下样式： /*水平翻转*/ .flipx { transform: rotateY(180deg); } /*垂直翻转*/ .flipy { transform: rotateX(180deg); }

　注意：用第二种情况在iPhone5会出现兼容问题，

transform: rotateY(180deg); 这样写选择无效，如图标题右边图片所示：

所以还是用第一种方法。

例子：

HTML代码：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta content="yes" name="apple-mobile-web-app-capable" /> <meta content="black" name="apple-mobile-web-app-status-bar-style" /> <meta content="telephone=no" name="format-detection" /> <title>Document</title> <style type="text/css"> *{margin:0; padding:0;} body{ max-width: 640px; margin: 0 auto; } .left{ float: left; } .right{ float: right; } .public_bzhh_title{margin:15px 10px; height: 38px; line-height: 38px; color: #fff; text-align: center; display: block;background:url(bg_title_center.png) repeat-x; background-size: 1px 38px; } /*注意 background-size: 1px 38px; 当宽度写成auto时，安卓手机标题背景不显示background-size: auto 38px;*/ .public_bzhh_title span{ display: block; } .public_bzhh_title span.left, .public_bzhh_title span.right{ background:#ffc99f url(title_edge.png) no-repeat; width:21px; height: 38px; background-size: 100% 100%; } .public_bzhh_title span.center{ overflow: hidden; -ms-text-overflow: ellipsis;text-overflow: ellipsis;white-space: nowrap; } .public_bzhh_title span.right{ /*水平翻转这个兼容性比较好安卓低版本都可以兼容*/ -moz-transform:scaleX(-1); -webkit-transform:scaleX(-1); -o-transform:scaleX(-1); transform:scaleX(-1); /*IE*/ filter:FlipH; } .note{font-size: 23px; color: red; margin: 10px; line-height: 30px; } </style> </head> <body> <div class="public_bzhh_title"><span class="left"></span><span class="right"></span><span class="center">你是否在困扰这些问题？</span></div> <p class="note">注意: </p> <p class="note">样式中background-size: 1px 38px; 当宽度写成auto时，安卓手机标题背景不显示background-size: auto 38px;</p> </body> </html>

效果图：

二、background-size兼容问题，在安卓手机上背景图片无法显示如图所示：

.public_bzhh_title{margin:15px 10px; height: 38px; line-height: 38px; color: #fff; text-align: center; display: block;background:url(bg_title_center.png) repeat-x;background-size: auto 38px;} 若上面的样式这样写就出现如上图所示，兼容问题，宽不能用auto自适应来写。

改这个兼容问题很简单，只要把最后一个样式改为 background-size: 1px 38px;就可以

效果图：

　原链接：http://www.zhangxinxu.com/wordpress/?p=1637

转载于:https://www.cnblogs.com/huanghuali/p/6687824.html

最新回复(0)