<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. 1.5 RPM红帽软件包1.6 Yum软件仓库

    1.5 RPM红帽软件包 在RPM(红帽软件包管理器)公布之前,要想在Linux系统中安装软件只能采取源码包的方式安装.早期在Linux系统中安装程序是一件非常困难.耗费耐心的事情,而且大多数的服务程 ...

  2. Centos双网卡配置默认路由

    Centos6.5 双网卡,我们只需要一个默认路由,如果两个都有或都没有会有一系列的问题 [root@centos]# vi /etc/sysconfig/network修改以下内容NETWORKIN ...

  3. CentOS 6.5新增加硬盘挂载并实现开机自动挂载

    Centos7.x请参考:https://www.cnblogs.com/himismad/p/7851548.html 在内网主机Centos 6.5新增一个50G硬盘 (搭建在CAS服务器,直接新 ...

  4. centos7网卡配置文件详解与固定服务器ip

    环境:Centos7.3(最小安装方式安装) 查看自动获取的IP地址 ip addr 更改网卡配置,配置静态IP 网卡配置文件位置:/etc/sysconfig/network-scripts/ifc ...

  5. 使用Selenium从IEEE与谷歌学术批量爬取BibTex文献引用

    搞科研的小伙伴总是会被期刊严苛的引用文献格式搞的很头疼.虽然常用的文献软件可以一键导出BibTex,但由于很多论文在投稿之前都会先发上Arxiv占坑,软件就很可能会把文献引出为来自Arxiv.我用的是 ...

  6. 关于lua闭包导致引用无法释放内存泄露

    最近项目存在严重的内存泄漏问题,每次切level 会增加20M无法释放的内存,翻遍了项目用了多个工具,查询资料等 发现项目中两种存在内存泄露的情况 1.lua闭包的不当使用,对比包的引用要及时 释放. ...

  7. [leetcode] 44. 通配符匹配(Java)(动态规划)

    44. 通配符匹配 动态规划 做动态规划很简单,三步走: 第一步,判断可否用动态规划做,即判断是否满足两个条件:①最优子结构,②重叠子问题.显然该题求s与p是否match,可由其字串层层分解上来. 我 ...

  8. Python+Selenium自动化 模拟鼠标操作

    Python+Selenium自动化 模拟鼠标操作   在webdriver中,鼠标的一些操作如:双击.右击.悬停.拖动等都被封装在ActionChains类中,我们只用在需要使用的时候,导入这个类就 ...

  9. HEVC之路0：HM16.18的运行+码流分析

    1.HM下载 HM不能直接网页下载,因为它是采用svn来管理代码的,因此需要利用svn下载,这里采用TortoiseSVN(软件下载地址为https://tortoisesvn.net/)进行下载. ...

  10. 前端工具 | JS编译器Monaco使用教程

    前言 我的需求是可以语法高亮.函数提示功能.自动换行.代码折叠 Monaco Monaco是微软家的,支持的语言很多,还有缩略地图,有时候提示不好用然后包体很大. The Monaco Editor ...