CSS学习记录21

CSS 工具提示

通过CSS 创建工具提示(Tooltip)。

当用户将鼠标指针移动到元素上时,工具提示通常用于提供关于某内容的额外信息:

<style>
/* Tooltip 容器 */
.tooltip {position: relative;display: inline-block;border-bottom: 1px dotted black; /* 如果需要在可悬停文本下面显示点线 */
}/* Tooltip 文本 */
.tooltip .tooltiptext {visibility: hidden;width: 120px;background-color: black;color: #fff;text-align: center;padding: 5px 0;border-radius: 6px;/* 定位工具提示文本 - 请看下面的例子 */position: absolute;z-index: 1;
}/* 将鼠标悬停在工具提示容器上时,显示工具提示文本 */
.tooltip:hover .tooltiptext {visibility: visible;
}
</style><div class="tooltip">Hover over me<span class="tooltiptext">Tooltip text</span>
</div>

HTML:

使用容器元素(例如<div>)并向其添加“tooltip"类。当用户将鼠标悬停在此<div>上时,会显示工具提示文本。工具提示文本位于 class="tooltiptext" 的嵌入式元素(如<span>)中。

CSS:

tooltip 类使用position: relative,用于放置工具提示文本(position: absolute)。tooltiptext 类保存实际的工具提示文本。默认情况下它是隐藏的,并会在鼠标悬停时可见。 当用户将鼠标移到class="tooltip"的<div>上时,:hover选择器用于显示工具提示文本。

定位工具提示

本例中,工具提示位于“可悬停”文本(<div>)的右侧(left:105%)。另外请注意,top:-5px 用于将其放置在其容器元素的中间。使用数字5是因为本例中工具提示文本的上下内边距均为5px。如果增加其内边距,您可以同时增加top属性的值,以确保它停留在中间。

  左侧提示工具:

.tooltip .tooltiptext {top: -5px;right: 105%; 
}

 如果您希望工具提示位于上方或下方,可以参考下面的例子。这里使用了负60像素的左外边距属性(margin-left)。 这是为了把工具提示与可悬停文本进行居中对齐。该值是工具提示宽度(width)的一半。

.tooltip .tooltiptext {width: 120px;bottom: 100%;left: 50%; margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

底部工具提示

.tooltip .tooltiptext {width: 120px;top: 100%;left: 50%;margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

工具提示箭头

如需创建在工具提示的指定侧面显示的箭头,请在工具提示后添加"空的”的内容,并使用伪元素类::after 和 content 属性。 箭头本身是使用边框创建的。这会使工具提示看起来像气泡。

注意这里使用了border的特性,当我们不给boder对应的元素设置宽高时,此时再加边框会为显示一个小正方形,每一个border的边等同于四分之一的正方形,它看起来很像箭头,所以就借此充当为工具提示的箭头。

解释:将箭头定位在工具提示内:top:100%将箭头放置在工具提示的底部,left:50%将使箭头居中。border-width 属性指定箭头的大小。如果您更改此设置,也请将margin-left 值更改为相同值。这将使箭头居中。

.tooltip .tooltiptext::after {content: " ";position: absolute;top: 100%; /* At the bottom of the tooltip */left: 50%;margin-left: -5px;border-width: 5px;border-style: solid;border-color: black transparent transparent transparent;
}

淡入的工具提示(动画)

如果希望在即将显示的工具提示文本中淡入淡出,可以将CSS transition 属性与 opactity 属性一同使用,并在指定的秒数内从完全不可见变为100%可见:

.tooltip .tooltiptext {opacity: 0;transition: opacity 1s;
}.tooltip:hover .tooltiptext {opacity: 1;
}

CSS图像样式

圆角图像

使用border-radius 属性创建圆形图像:

img {border-radius: 8px;
}

img {border-radius: 50%;
}

缩略图图像

使用 border 属性创建缩略图。

img {border: 1px solid #ddd;border-radius: 4px;padding: 5px;width: 150px;
}<img src="paris.jpg" alt="Paris">

作为链接的缩略图: 

img {border: 1px solid #ddd;border-radius: 4px;padding: 5px;width: 150px;
}img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}<a href="paris.jpg"><img src="paris.jpg" alt="Paris">
</a>

响应式图像 

响应式图像会自动调整以适应屏幕尺寸。如果您希望根据需要缩小图像,但需要杜绝放大到大于原始尺寸,可以添加如下代码:

img {max-width: 100%;height: auto;
}

居中图像

如需使图像居中,请将左右外边距设置为 auto 并将其设置为块元素:

img {display: block;margin-left: auto;margin-right: auto;width: 50%;
}

透明图像

opacity 属性的取值范围为0.0 - 1.0。 值越低,越透明:

img {opacity: 0.5;
}

图像滤镜

CSS filter 属性把视觉效果(例如模糊和饱和度)添加到元素。filter 属性可设置为none 或 下面列出的一个或多个函数。如果任何函数的参数无效,则该函数返回none。 除特殊说明外,函数的值如果接受百分比值(如 34%),那么该函数也接受小数值(如0.34)。

举例:把所有图像的颜色更改为黑白(100% 灰色):

img {filter: grayscale(100%);
}

 blur()将高斯模糊应用于输入图像。

filter: blur(5px);

 brightness() 将线性乘法器应用于输入图像,以调整其亮度。值为0%将创建全黑图像;值为100%会使输入保持不变,其他值是该效果的线性乘数。如果值大于 100% 将使图像更加明亮。

.brightness {filter: brightness(250%);}

contrast() 调整输入图像的对比度。值是0%将使图像变灰;值是100%,则无影响;若值超过100%将增强对比度。

 .contrast {filter: contrast(180%);}

drop-shadow()使用<shadow> 参数沿图像的轮廓生成阴影效果。阴影语法类似于<box-shadow>,但不允许使用 inset 关键字以及 spread 参数。 与所有 filter 属性值一样,任何在drop-shadow() 后的滤镜同样会应用在阴影上。

 .shadow {filter: drop-shadow(8px 8px 10px black);}

hue-rotate() 应用色相旋转。<angle> 值设定图像会被调整的色环角度值。值为0deg,则图像无变化。

.huerotate {filter: hue-rotate(180deg);}

 invert() 反转输入图像。值为100%则图像完全反转,值为 0% 则图像无变化。值在 0% 和 100% 之间,则是该效果的线性乘数。

.invert {filter: invert(100%);}

 

opacity()  应用透明度。值为 0% 则使图像完全透明,值为 100% 则图像无变化。

 .opacity {filter: opacity(50%);}

 saturate() 改变图像饱和度。值为0%则是完全不饱和,值为100%则图像无变化。超过100%则增加饱和度。

filter: saturate(200%);

sepia() 将图像转换为深褐色。值为100%则完全是深褐色的,值为 0%图像无变化。

 .sepia {filter: sepia(100%);}

组合函数

你可以组合任意数量的函数来控制渲染。滤镜将按声明顺序依次应用。

filter: contrast(175%) brightness(103%);

图像悬停增加

创建鼠标悬停时的叠加效果:

淡入文本效果:

<style>.container {position: relative;width: 19.5%;}.image {display: block;width: 100%;height: auto;}.overlay {position: absolute;top: 0;bottom: 0;left: 0;right: 0;height: 100%;width: 100%;opacity: 0;transition: .5s ease;background-color: #008CBA;}.container:hover .overlay {opacity: 1;}.text {color: white;font-size: 20px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);}</style>
<body><h1>淡入文本</h1><div class="container"><img src="/assets/images/4.png" alt="Avatar" class="image" style="width:300px;" ><div class="overlay"><div class="text">Hello World</div></div></div></body>

 

淡入框效果:

 .container {position: relative;width: 12%;}.image {opacity: 1;display: block;width: 100%;height: auto;transition: .5s ease;backface-visibility: hidden;}.middle {transition: .5s ease;opacity: 0;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%)}.container:hover .image {opacity: 0.3;}.container:hover .middle {opacity: 1;}.text {background-color: #4CAF50;color: white;font-size: 16px;padding: 16px 32px;}
<body><h1>淡入框</h1><div class="container"><img src="/assets/images/4.png" alt="Avatar" class="image" style="width:200px"><div class="middle"><div class="text">Bill Gates</div></div></div></body>

划入效果:

 .container {position: relative;width: 19.5%}.image {display: block;width: 100%;height: auto;}.overlay {position: absolute;bottom: 100%;left: 0;right: 0;background-color: #008CBA;overflow: hidden;width: 100%;height: 0;transition: .5s ease;}.container:hover .overlay {bottom: 0;height: 100%;}.text {white-space: nowrap;color: white;font-size: 20px;position: absolute;overflow: hidden;top: 50%;left: 50%;transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);}
<body><h1>滑入(从上)</h1><div class="container"><img src="/assets/images/4.png" alt="Avatar" class="image" style="width: 300px;"><div class="overlay"><div class="text">Hello World</div></div></div></body>

翻转图像

img:hover {transform: scaleX(-1);
}

响应式图库

可以使用CSS创建自适应的图片库。本例使用媒体查询来重新排列不同屏幕尺寸的图像。可以通过调整浏览器窗口的大小以查看效果:

.responsive {padding: 0 6px;float: left;width: 24.99999%;
}@media only screen and (max-width: 700px){.responsive {width: 49.99999%;margin: 6px 0;}
}@media only screen and (max-width: 500px){.responsive {width: 100%;}
}

 CSS object-fit 属性

CSS object-fit 属性用于规定应如何调整<img> 或 <vedio> 的大小来适应其容器。这个属性告诉内容以不同的方式填充容器。比如“保留长宽比”或者“展开并用尽可能多的空间”。

下面的图片是来自上海鲜花港的郁金香图片,它是300X300像素:

但是,如果我们把上面的上面的图像设置为200X300像素,则它看起来会像这样:

我们看到图像被压缩以适合200X300像素的容器,并且原始宽高比被破坏了。如果使用 object-fit: cover; 它会切剪图像的侧面,保留长宽比,并填充空间,如下所示:

img {width: 200px;height: 400px;object-fit: cover;
}

CSS object-fit 属性的所有值

object-fit 属性可接受如下值:

  • fill - 默认值。调整替换后的内容大小,以填充元素的内容框。如有必要,将拉伸或挤压物体以适应该对象。
  • contain - 缩放替换后的内容以保持纵横比,同时将其放入元素的内容框。
  • cover - 调整替换内容的大小,以在填充元素的整个内容框时保持其长宽比。该对象将被裁剪以适应。
  • none - 不对替换的内容调整大小。
  • scale-down - 调整内容大小就像没有指定内容或包容内容一样(将导致较小的具体对象尺寸)
fill {object-fit: fill;}
contain {object-fit: contain;}
cover {object-fit: cover;}
scale-down {object-fit: scale-down;}
none {object-fit: none;}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/65597.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2025经典的软件测试面试题(答案+文档)

&#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 以下是软件测试相关的面试题及答案&#xff0c;希望对各位能有帮助&#xff01; 1、测试分为哪几个阶段? 一般来说分为5个阶段&#xff1a;单元测试、集成测试…

021-spring-springmvc

比较重要的部分 比较重要的部分 比较重要的部分 关于组件的部分 这里以 RequestMappingHandlerMapping 为例子 默认的3个组件是&#xff1a; org.springframework.web.servlet.handler.BeanNameUrlHandlerMapping org.springframework.web.servlet.mvc.method.annotation.Requ…

rocketmq5源码系列--(二)--生产者发送消息

这是broker源码系列第一篇。还是和往常一样&#xff0c;建议copy到本地阅读 broker是基于netty的 rocketmq队列分物理队列和逻辑队列&#xff0c;物理队列只有一个而逻辑队列有很多个 rocketmq 物理队列&#xff0c;一个物理队列对应一个文件&#xff0c;一个物理队列可以对…

【每日学点鸿蒙知识】RichText展示问题、slider组件内置间距、WebView性能优化、AVSession错误

1、HarmonyOS RichText 展示问题&#xff1f; build() {Column() {Row({space:10}) {Column() {RichText( this.item.title ?? "" ).width("100%").height(80)Text(this.item.desc ?? "").fontSize(12).fontColor(0x9e9e9e)}.margin({left…

【C语言】指针大小排列

从键盘输入3个整数&#xff0c;要求定义3个指针变量p1,p2,p3&#xff0c;使p1指向3个数的最大者&#xff0c;p2 指向次大者&#xff0c;p3指向最小者&#xff0c;然后按由小到大的次序输出3个数。 #include <stdio.h> void func(int* p1, int* p2, int* p3) {if (*p1 <…

Redisson 框架详解

目录 一.为什么要使用分布式锁&#xff1f; 二.Redisson 的基本使用&#xff1a; 1.添加 Redisson 依赖&#xff1a; 2.在 application.yml 配置 Redis&#xff1a; 3. 创建 Redisson 客户端&#xff1a; &#xff08;1&#xff09;单节点模式&#xff1a; &#xff08;…

Facebook 上的社群文化:连接与共享

随着社交媒体的普及&#xff0c;Facebook作为全球最大的社交平台之一&#xff0c;不仅改变了人们的沟通方式&#xff0c;还塑造了独特的社群文化。在Facebook上&#xff0c;用户可以轻松地与朋友、家人保持联系&#xff0c;同时也能加入兴趣相投的群组、参与讨论和共享内容。社…

语言模型的革命:大型概念模型(LCM)的崛起

在人工智能领域&#xff0c;Meta最近推出的一项重大突破正在引起研究人员和开发者的广泛关注&#xff1a;大型概念模型&#xff08;Large Concept Models&#xff0c;简称LCM&#xff09;。这一创新彻底改变了我们对语言模型的理解&#xff0c;并为未来AI技术的进展指明了新的方…

Python Polars快速入门指南:LazyFrames

前文已经介绍了Polars的Dataframe, Contexts 和 Expressions&#xff0c;本文继续介绍Polars的惰性API。惰性API是该库最强大的功能之一&#xff0c;使用惰性API可以设定一系列操作&#xff0c;而无需立即运行它们。相反&#xff0c;这些操作被保存为计算图&#xff0c;只在必要…

C# 读取多种CAN报文文件转换成统一格式数据,工具类:CanMsgRead

因为经常有读取CAN报文trace文件的需求&#xff0c;而且因为CAN卡不同、记录软件不同会导致CAN报文trace文件的格式都有差异。为了方便自己后续开发&#xff0c;我写了一个CanMsgRead工具类&#xff0c;只要提供CAN报文路径和CAN报文格式的选项即可将文件迅速读取转换为统一的C…

Redis 多机功能 — 复制、Sentinel及集群

Redis 的复制功能通过主从模式实现&#xff0c;允许用户为存储着目标数据库的服务器&#xff08;主服务&#xff09;创建多个拥有相同数据库副本的服务器&#xff08;从服务&#xff09;。让客户端的读请求可以分摊到从服务器中&#xff0c;从而提升性能。复制功能适合对数据一…

计算机网络 (14)数字传输系统

一、定义与原理 数字传输系统&#xff0c;顾名思义&#xff0c;是一种将连续变化的模拟信号转换为离散的数字信号&#xff0c;并通过适当的传输媒介进行传递的系统。在数字传输系统中&#xff0c;信息被编码成一系列的二进制数字&#xff0c;即0和1&#xff0c;这些数字序列能够…

leecode377.组合总和IV

本题其实是多重背包问题&#xff0c;对于价值和重量都是nums[i]的的物品&#xff0c;求装满这个容量为4的背包共有多少种排列方式 如果是组合问题&#xff0c;那么遍历顺序是先物品后背包&#xff0c;这样能保证物品按从小到大顺序依次放置&#xff0c;对于实例1求出来为4&…

【学生管理系统】element ui级联菜单bug

级联后端 通过父id来进行查询 GetMapping("/{parentId}")public BaseResult findAllByParentId(PathVariable("parentId") String parentId){//1 根据父id查询所有城市QueryWrapper<TbCity> queryWrapper new QueryWrapper<>();queryWrapper.…

第十七周:Fast R-CNN论文阅读

Fast R-CNN论文阅读 摘要Abstract文章简介1. 引言2. Fast R-CNN框架2.1 RoI位置信息映射2.2 RoI pooling2.3 分类器与边界框回归器2.4 以VGG16为backbone的Fast RCNN的网络结构 3. 训练细节3.1 采样3.2 多任务损失 4. 优缺点分析总结 摘要 这篇博客介绍了Fast R-CNN&#xff0…

Python爬虫(二)- Requests 高级使用教程

文章目录 前言一、Session 对象1. 简介2. 跨请求保持 Cookie3. 设置缺省数据4. 方法级别参数不被跨请求保持5. 会话作为上下文管理器6. 移除字典参数中的值 二、请求与响应1. 请求与响应对象1.1 获取响应头信息1.2 获取发送到服务器的请求头信息 三、SSL 证书验证1. 忽略 SSL 证…

Java-38 深入浅出 Spring - AOP切面增强 核心概念 相关术语 Proxy配置

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 大数据篇正在更新&#xff01;https://blog.csdn.net/w776341482/category_12713819.html 目前已经更新到了&#xff1a; MyBatis&#xff…

【算法】复杂性理论初步

六、算法复杂性初步 重要的复杂性类 P P P 的定义 多项式时间内可解的问题 若 L ∈ P L∈P L∈P&#xff0c;则存在确定性多项式时间的图灵机 M M M&#xff0c;使得 M ( x ) 1 ⟺ x ∈ L M(x)1⟺x∈L M(x)1⟺x∈L N P NP NP 的定义 多项式时间内可验证验证解的正确性 &…

hive中的四种排序类型

1、Order by 全局排序 ASC&#xff08;ascend&#xff09;: 升序&#xff08;默认&#xff09; DESC&#xff08;descend&#xff09;: 降序 注意 &#xff1a;只有一个 Reducer,即使我们在设置set reducer的数量为多个,但是在执行了order by语句之后,当前此次的运算还是只有…

Mysql(MGR)和ProxySQL搭建部署-Docker版本

项目路径&#xff1a;D:\study\backend\mysql\mgr 一、Mysql(MGR) 1.1 docker-compose.yaml volumes: # MySQL配置文件目录 - "./mysql-1/conf.d/my.cnf:/etc/mysql/my.cnf" # MySQL工作目录 - "./mysql-1/data:/var/lib/mysql" …