样式笔记

来源：互联网发布：java贪吃蛇代码详解编辑：程序博客网时间：2024/06/10 14:45

1、手机上的-webkit-filter: 支持情况

2、经常遇到美工给的样式有这么个问题，比如某个DIV 他的背景是一张图片，正常会给的是一小块图片的区域，但是开发人员在做事件的时候需要将事件触发范围变大，一般情况下直接调整DIV大小，但是这样就会把图片也跟着放大，造成图片被拉伸。可以用如下方式解决

原样式：

.header .headerBack{
position:absolute;
width:1.2em;
height:1.2em;
left:1em;
top:50%;
margin-top:-0.6em;
background: transparent url('images/back_c.png') no-repeat;
-webkit-background-size: 100% 100%;

}

直接调整大小：

.header .headerBack{
position:absolute;
width:3em;
height:3em;
left:0em;
top:0em;
background: transparent url('images/back_c.png') no-repeat;
-webkit-background-size: 100% 100%;

}

调整后的样式：

.header .headerBack{
position:absolute;
width: 3em;
height: 3em;
left:0em;
top:0em;
background: url('images/back_c.png') no-repeat center center transparent;
-webkit-background-size: 50%;
}

主要调整的2个地方是background和size