两种写法
【方法一】利用css动画属性rotate旋转来实现:
/* 方法一 */
.mirrorRotateLevel {
transform: rotateY(180deg); /* 水平镜像翻转 */
}
.mirrorRotateVertical {
transform: rotateX(180deg); /* 垂直镜像翻转 */
}
此处,rotateY(180deg) 这里的 Y 表示元素以Y轴镜像翻转,也即水平翻转;同理, rotateX(180deg) 表示以X轴为镜像翻转,即垂直翻转。
【方法二】各个浏览器对镜像翻转的兼容写法来实现:
/* 方法二 */
.mirrorRotateLevel { /* 水平镜像翻转 */
-moz-transform:scaleX(-1);
-webkit-transform:scaleX(-1);
-o-transform:scaleX(-1);
transform:scaleX(-1);
/*兼容IE*/
filter:FlipH;
}
.mirrorRotateVertical { /* 垂直镜像翻转 */
-moz-transform:scaleY(-1);
-webkit-transform:scaleY(-1);
-o-transform:scaleY(-1);
transform:scaleY(-1);
/*兼容IE*/
filter:FlipV;
}
注意: 镜像翻转和普通旋转不同,镜像翻转以轴为镜像,普通旋转以点为镜像。
背景图片
background:url(logo.png)no-repeat;
背景图片大小缩放: 宽 高
background-size:100%100%;
绝对定位
position:absolute;
设置一个背景颜色
background-color: #bfa;
设置图片不重复
background-repeat: no-repeat;
背景图片 终极缩放大法
object-fit: cover;
cursor: pointer;
background-attachment用来设置背景图片是否随页面一起滚动可选值:
不随窗口滚动的图片,我们一般都是设置给body,而不设置给其他元素
background-attachment: fixed;
背景图像偏移, 如下: 水平(宽度.左右平移) 垂直(高度.上下)
background-position: -50px -50px;
背景图片默认是贴着元素的左上角显示
通过background-position可以调整背景图片在元素中的位置
可选值:
该属性可以使用 top right left bottom center中的两个值来指定一个背景图片的位置
如果只给出一个值,则第二个值默认是center,也可以直接指定两个偏移量
第一个值是水平偏移量
第二个是垂直偏移量
单行文字超出显示省略号
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
多行文字超出显示省略号
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
<span>标签无法使用常规方法控制定位。方法如下