css图片显示文字(上浮)
<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图片显示文字(上浮)的更多相关文章
- css图片替换文字
含义: 图像替代,就是像我们在平时将文本添加到文本中,然后通过css隐藏文本在它的位置上显示一个背景图片,这样,搜索引擎仍然可以搜到HTML文本,即使我们禁用css后,文本时仍然是可以显示的. 引用& ...
- div css 图片和文字上下居中对齐
想要图片和文字水平居中对齐很容易,可今天做这个树的时候,遇到了要将图片上下居中.这下就不知道怎么搞. 拿手册看也看不出所以然来,不同的浏览器对DIV的支持不一个,目前最好的浏览器是Firefox. 这 ...
- [CSS]图片与文字对齐问题
摘自:张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 图片与文字默认是居底对齐了.所以当图片与文字在一起的时候往往都是不对齐的.尤其图片较小时就更加明显了,我看到很多人使 ...
- 使用opencv调用24*24点阵字库和8*16ASCII字库在图片显示文字数字
课程实验:编程读汉字点阵字库,把自己的名字和学号叠加到图片的右下位置. 主要步骤分为三部分 第一部分:读取图片(文件读取) 第二部分:读取文字并从字库中提取相应的编码(字库的存储原理) 第三部分:将相 ...
- 问题2:css图片、文字居中
1. 文本或图片水平对齐:父元素中添加以下样式 text-align : center;2. 单行文字垂直对齐:父元素中添加以下样式 line-height : 父元素高度; 3.图片 ...
- css图片文字
1.浏览器是把 html 和 css 一起下载并执行的,计算机里把两件事情同时做 异步加载.计算机中的同步异步和我们生活中的正好是相反的. 补充: 同步,是所有的操作都做完,才返回给用户结果.即写完 ...
- 如何利用CSS代码使图片和文字在同一行显示且对齐
对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同 ...
- CSS控制图片和文字在同一行显示且对齐的3种方法
CSS控制图片和文字在同一行显示且对齐的3种方法 在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见方法 ...
- ActiveReport 同一单元格内图片跟文字按条件显示
ActiveReports支持提供Image控件来显示图片素材,Image控件的值可以为图像的二进制流,图像路径,或url等:而在很多情况下,图片是签名扫描文件,并不会一直有值.如果图片的值为空,则显 ...
随机推荐
- 运维常用shell脚本二(压缩文件、过滤不需要的文件、检测进程)
一.压缩指定目录下的文件并删除原文件 #!/bin/bashZIP_DAY=7 function zip { local dir=$1 if [ -d $dir ];then local file_n ...
- Linux xargs命令-(转载)
xargs是给命令传递参数的一个过滤器,也是组合多个命令的一个工具.它把一个数据流分割为一些足够小的块,以方便过滤器和命令进行处理.通常情况下,xargs从管道或者stdin中读取数据,但是它也能够从 ...
- 3.20 tr:替换或删除字符
tr命令 从标准输入中替换.缩减或删除字符,并将结果写到标准输出. tr [option] [SET1] [SET2] tr [选项] [字符1] [字符2] -d 删除字符 -s ...
- linux(centos 7)下安装JDK,Tomcat,mysql 运行Maven 项目
一.在Linux中安装JDK 1. 将JDK上传到root下(任何位置均可以). 如图: 2. 用解压命令解压JDK tar -xvf (此处为jdk文件名) 如果是rpm包,执行rpm -i jdk ...
- 【数据结构与算法】多种语言(VB、C、C#、JavaScript)系列数据结构算法经典案例教程合集目录
目录 1. 专栏简介 2. 专栏地址 3. 专栏目录 1. 专栏简介 2. 专栏地址 「 刘一哥与GIS的故事 」之<数据结构与算法> 3. 专栏目录 [经典回放]多种语言系列数据结构算法 ...
- 【ArcGIS遇上Python】ArcGIS Python批处理入门到精通实用教程目录
目录 1. 专栏简介 2. 专栏地址 3. 专栏目录 1. 专栏简介 Python语言是目前很火热的语言,极大的促进了人工智能发展.你知道在ArcGIS中也会有python的身影吗?事实上,在ArcG ...
- 痞子衡嵌入式:关于i.MXRT中FlexSPI外设lookupTable里配置Normal read的一个小误区
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是i.MXRT中FlexSPI外设lookupTable里配置Normal read的一个小误区. 关于串行四线NOR Flash,当其作 ...
- Jenkins 入门介绍
一.概念 近几年,DevOps理念一致处于一个比较热门的状态.我每个月在工作群或者技术交流群都会看到这个名词出现.前年,当我第一次看到这个"DevOps",我压根不知道这是一个什么 ...
- [leetcode] 30. 与所有单词相关联的字串(cn第653位做出此题的人~)
30. 与所有单词相关联的字串 这个题做了大概两个小时左右把...严重怀疑leetcode的judge机器有问题.同样的代码交出来不同的运行时长,能不能A题还得看运气? 大致思路是,给words生成一 ...
- eclipse自动格式化代码
前段时间在Eclipse里面设置了java文件保存时自动格式化,在java->Code Style->Formatter里设置了自定义的格式化的样式,这样每次保存后都会自动格式化代码,用了 ...