CSS背景图像，镜像翻转、缩放、背景偏移与定位、文字溢出处理 |
您所在的位置：网站首页 › 将图片镜像反转 › CSS背景图像，镜像翻转、缩放、背景偏移与定位、文字溢出处理 |
| CSS下镜像翻转（水平/垂直翻转） 两种写法 【方法一】利用css动画属性rotate旋转来实现： 代码语言：javascript复制/* 方法一 */ .mirrorRotateLevel { transform: rotateY(180deg); /* 水平镜像翻转 */ } .mirrorRotateVertical { transform: rotateX(180deg); /* 垂直镜像翻转 */ }此处，rotateY(180deg) 这里的 Y 表示元素以Y轴镜像翻转，也即水平翻转；同理， rotateX(180deg) 表示以X轴为镜像翻转，即垂直翻转。 【方法二】各个浏览器对镜像翻转的兼容写法来实现： 代码语言：javascript复制/* 方法二 */ .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背景图片 代码语言：javascript复制background:url(logo.png)no-repeat;背景图片大小缩放: 宽 高 代码语言：javascript复制background-size:100%100%;绝对定位 代码语言：javascript复制position:absolute;设置一个背景颜色 代码语言：javascript复制background-color: #bfa;设置图片不重复 代码语言：javascript复制background-repeat: no-repeat;背景图片 终极缩放大法 代码语言：javascript复制object-fit: cover; cursor: pointer;background-attachment用来设置背景图片是否随页面一起滚动可选值： 不随窗口滚动的图片，我们一般都是设置给body，而不设置给其他元素 代码语言：javascript复制background-attachment: fixed;scroll，默认值，背景图片随着窗口滚动fixed，背景图片会固定在某一位置，不随页面滚动背景图像偏移, 如下: 水平(宽度.左右平移) 垂直(高度.上下) 代码语言：javascript复制background-position: -50px -50px;背景图片默认是贴着元素的左上角显示 通过background-position可以调整背景图片在元素中的位置 可选值： 该属性可以使用 top right left bottom center中的两个值来指定一个背景图片的位置 top left 左上bottom right 右下如果只给出一个值，则第二个值默认是center，也可以直接指定两个偏移量 第一个值是水平偏移量 如果指定的是一个正值，则图片会向右移动指定的像素如果指定的是一个负值，则图片会向左移动指定的像素第二个是垂直偏移量 如果指定的是一个正值，则图片会向下移动指定的像素如果指定的是一个负值，则图片会向上移动指定的像素css处理文字不换行、换行截断、溢出省略号单行文字超出显示省略号 代码语言：javascript复制overflow: hidden; text-overflow: ellipsis; white-space: nowrap;多行文字超出显示省略号 代码语言：javascript复制overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;CSS span偏移出现的原因：以文字基线对齐标签无法使用常规方法控制定位。方法如下 （1）给其中人一个元素设置：vertical-align:top（2）使用float浮动（3）定位position |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |