CSS背景图像，镜像翻转、缩放、背景偏移与定位、文字溢出处理 |
您所在的位置：网站首页 › 镜像的文字怎么翻转 › 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;CSS span偏移出现的原因：以文字基线对齐标签无法使用常规方法控制定位。方法如下 （1）给其中人一个元素设置：vertical-align:top（2）使用float浮动（3）定位position |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |