前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS背景图像,镜像翻转、缩放、背景偏移与定位、文字溢出处理

CSS背景图像,镜像翻转、缩放、背景偏移与定位、文字溢出处理

作者头像
AlexTao
修改2023-05-16 13:13:42
17.1K0
修改2023-05-16 13:13:42
举报
文章被收录于专栏:钻芒博客

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偏移

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

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

  • (1)给其中人一个元素设置:vertical-align:top
  • (2)使用float浮动
  • (3)定位position
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • CSS下镜像翻转(水平/垂直翻转)
  • 背景图片 相关CSS
  • css处理文字不换行、换行截断、溢出省略号
  • CSS span偏移
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档