<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/lobal.css" />
<style>
.main-c {
/*定义父级的大小，设置高度为图片高度，便于隐藏文字部分*/
width: 630px;
height: 400px;
/* background: blue; */
position: relative;
/*overflow: hidden;隐藏文字部分*/
overflow: hidden;
/*隐藏超出的部分，就是隐藏蒙版部分*/
}

.mainbox1 {
width: 630px;
height: 400px;
/* background: palevioletred; */
color: #fff;
}

.txt1 {
/*创建一个蒙版*/
width: 630px;
height: 250px;
position: absolute;
/*定好蒙版一开始在的位置*/
bottom: -250px;
/*距离main-c底部的距离为txt自身的高*/
left: 0;
transition: all linear 0.8s;
/*设置蒙版的上升动画效果*/
}

.main-c:hover .txt1 {
bottom: 0;
/*将蒙版底部位置上移,与父级main-c底部对齐*/
}

.txt1 span {
color: white;
font-size: 25px;
margin-left: 200px;
text-align: center;
}

.box1 p {
position: absolute;
display: block;
font-size: 50px;
color: white;
left: 50px;
top: 0px;
}
.main-c:hover .box1 p{
/* color: black; */
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="main-c">
<div class="mainbox1"><img src="img/jiao.png"></div>
<div class="box1">
<p>窖</p>
</div>
<div class="txt1">
<span>
<p>窖龄越长，其香越幽，其味越正，其品越高</p>

<p>绵延了千百年的老窖池——天益老号生生不息，</p>

<p>其别具一格自成体系的微观生态环境，</p>

</span>
</div>
</div>
</body>
</html>

css图片显示文字（上浮）的更多相关文章

  1. css图片替换文字

    含义: 图像替代,就是像我们在平时将文本添加到文本中,然后通过css隐藏文本在它的位置上显示一个背景图片,这样,搜索引擎仍然可以搜到HTML文本,即使我们禁用css后,文本时仍然是可以显示的. 引用& ...

  2. div css 图片和文字上下居中对齐

    想要图片和文字水平居中对齐很容易,可今天做这个树的时候,遇到了要将图片上下居中.这下就不知道怎么搞. 拿手册看也看不出所以然来,不同的浏览器对DIV的支持不一个,目前最好的浏览器是Firefox. 这 ...

  3. [CSS]图片与文字对齐问题

    摘自:张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 图片与文字默认是居底对齐了.所以当图片与文字在一起的时候往往都是不对齐的.尤其图片较小时就更加明显了,我看到很多人使 ...

  4. 使用opencv调用24*24点阵字库和8*16ASCII字库在图片显示文字数字

    课程实验:编程读汉字点阵字库,把自己的名字和学号叠加到图片的右下位置. 主要步骤分为三部分 第一部分:读取图片(文件读取) 第二部分:读取文字并从字库中提取相应的编码(字库的存储原理) 第三部分:将相 ...

  5. 问题2：css图片、文字居中

    1. 文本或图片水平对齐:父元素中添加以下样式     text-align : center;2. 单行文字垂直对齐:父元素中添加以下样式     line-height : 父元素高度; 3.图片 ...

  6. css图片文字

    1.浏览器是把 html 和 css 一起下载并执行的,计算机里把两件事情同时做  异步加载.计算机中的同步异步和我们生活中的正好是相反的. 补充: 同步,是所有的操作都做完,才返回给用户结果.即写完 ...

  7. 如何利用CSS代码使图片和文字在同一行显示且对齐

    对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同 ...

  8. CSS控制图片和文字在同一行显示且对齐的3种方法

    CSS控制图片和文字在同一行显示且对齐的3种方法 在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见方法 ...

  9. ActiveReport 同一单元格内图片跟文字按条件显示

    ActiveReports支持提供Image控件来显示图片素材,Image控件的值可以为图像的二进制流,图像路径,或url等:而在很多情况下,图片是签名扫描文件,并不会一直有值.如果图片的值为空,则显 ...

随机推荐

  1. Linux服务之nginx服务篇一（概念）

    nginx官网:http://nginx.org/ 一. nginx和apache的区别 Nginx: 1.轻量级,采用 C 进行编写,同样的 web 服务,会占用更少的内存及资源. 2.抗并发,ng ...

  2. Linux中级之netfilter/iptables应用及补充

    一.iptables介绍 Netfilter/Iptables(以下简称Iptables)是unix/linux自带的一款优秀且开放源代码的完全自由的基于包过滤的防火墙工具,它的功能十分强大,使用非常 ...

  3. MyBatis 高级查询之多对多查询（十一）

    高级查询之多对多查询 查询条件:根据玩家名,查询游戏信息 我们在之前创建的映射器接口 GameMapper.java 中添加接口方法,如下: /** * 根据玩家名查询游戏 * @param name ...

  4. 为什么Android源码中都使用16进制进行状态管理？

    前言 在Android源码中,对于"多状态"的管理总是通过16进制数字来表示,类似这种格式: //ViewGroup.java protected int mGroupFlags; ...

  5. JavaSE-QuickStart

    老话常说:基础不牢地动山摇,于是我在b站上看杨中科老师的课程脑补一下,便记录这岁月的点滴 1.什么是编程 ? 编程:编写能够控制计算机来执行特定任务的代码. 2.什么是编程语言 ? 编程语言:是指程序 ...

  6. Python+Selenium学习笔记16 - unittest单元测试框架

    unittest单元测试框架包括 Test Case,  Test Suite, Test Runner, Test Fixture Test Cases 组成Test Suite, Test Run ...

  7. 使用kubeadm部署一套高可用k8s集群

    使用kubeadm部署一套高可用k8s集群 有疑问的地方可以看官方文档 准备环境 我的机器如下, 系统为ubuntu20.04, kubernetes版本1.21.0 hostname IP 硬件配置 ...

  8. 华为MDC软件架构

    华为MDC软件架构 平台软件零层逻辑架构如下图,由基础层.功能层.应用层和服务层组成. 零层逻辑架构 从平台软件一层逻辑架构可以看出,MDC用了华为自研的越影操作系统.兼容Autosar标准的软件中间 ...

  9. GStreamer 1.18.4稳定的错误修复版本

    GStreamer 1.18.4稳定的错误修复版本GStreamer团队宣布最喜欢的跨平台多媒体框架的稳定的1.18版本系列中的另一个错误修复版本!此版本仅包含错误修复和重要的安全修复程序,并且从1. ...

  10. 字符识别OCR原理及应用实现

    字符识别OCR原理及应用实现 文本是人类最重要的信息来源之一,自然场景中充满了形形色色的文字符号.光学字符识别(OCR)相信大家都不陌生,就是指电子设备(例如扫描仪或数码相机)检查纸上打印的字符,通过 ...