CSS各种小技巧

背景图片100%充满屏幕：
background-image: url(20.jpg);
background-repeat: no-repeat;
background-size: cover;

background-position: center center;*/

/*float实现的水平导航菜单居中*/
display: inline-block; 
*display: inline; 
zoom: 1;

实现导航菜单居中：

将line-height设置为nav的高度

/*实现图片圆角化*/
border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;

         CSS背景图拉伸自适应尺寸，全浏览器兼容

标签： css浏览器filterfirefoxchromeie

2012-09-15 01:43 64974人阅读 评论(3) 收藏 举报

突然有人问我这个问题，说网上CSS filter的方法在非IE浏览器下不奏效。思考之后，问题之外让我感慨万千啊，很多我们所谓的难题，都会随着时代的发展迎刃而解，或被新的问题所取代。

当CSS背景图片拉伸这个问题产生时，CSS3也只是浮云....

对于IE而言网上常见的方法是使用CSS滤镜，但那时Firefox还小，Chrome还没出生，IE称霸天下....。但如今，我们用三四行简短的代码就能实现全浏览器兼容的方法：

[css] view plain copy

1. .bg{  
2. background:url(http://wyz.67ge.com/wp-content/uploads/qzlogo.jpg);  
3. filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";  
4. -moz-background-size:100% 100%;  
5.     background-size:100% 100%;  
6. }  

渐变背景：

background:-moz-linear-gradient(left,#ace,#f96);/*Mozilla*/
    background:-webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));/*Old gradient for webkit*/
    background:-webkit-linear-gradient(left,#ace,#f96);/*new gradient for Webkit*/
    background:-o-linear-gradient(left,#ace,#f96); /*Opera11*/