HTML设置图片背景偏移样式名,css常用样式|背景图像、缩放、镜像旋转、背景偏移与定位、文字溢出处理方法...

CSS下镜像翻转

(水平/垂直翻转)(两种写法)

【方法一】利用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;

}

背景图片 相关CSS

背景图片

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;

scroll，默认值，背景图片随着窗口滚动

fixed，背景图片会固定在某一位置，不随页面滚动

背景图像偏移, 如下: 水平(宽度.左右平移) 垂直(高度.上下)

background-position: -50px -50px;

背景图片默认是贴着元素的左上角显示

通过background-position可以调整背景图片在元素中的位置

可选值：该属性可以使用 top right left bottom center中的两个值来指定一个背景图片的位置

top left 左上

bottom right 右下

如果只给出一个值，则第二个值默认是center，也可以直接指定两个偏移量

第一个值是水平偏移量

如果指定的是一个正值，则图片会向右移动指定的像素

如果指定的是一个负值，则图片会向左移动指定的像素

第二个是垂直偏移量

如果指定的是一个正值，则图片会向下移动指定的像素

如果指定的是一个负值，则图片会向上移动指定的像素

css处理文字不换行、换行截断、溢出省略号

单行文字超出显示省略号

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

多行文字超出显示省略号

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 3;

-webkit-box-orient: vertical;

an偏移

出现的原因：以文字基线对齐

标签无法使用常规方法控制定位。方法如下

(1)给其中人一个元素设置：vertical-align:top

(2)使用float浮动

(3)定位position