<!DOCTYPE html>

 /*透明度设置的两种方式,以及hover的用法,fixed,(relative,absolute)这两个一起用*/

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .touch:hover .content{

             visibility: visible;/*显示*/

         }

         .touch{

             width: 200px;

             height: 200px;

             overflow: hidden;

             position: relative;

         }

         .touch .content{

             position: absolute;

             top: 0;

             left: 0;

             right: 0;

             bottom: 0;

             color:white;

             /*background-color: black;*/

             /*opacity: 0.5;*/

             background-color:rgba(0,0,0,.5);/*透明度设置的两种方式*/

             text-align: center;

             visibility: hidden;/* 隐藏*/

         }

         .touch .c1{

             font-size: 32px;

         }

     </style>

 </head>

 <body>

     <div class="touch">

         <div><img src="1.jpg"></div>

         <div class="content">

             <div class="c1">ALEX</div>

             <div>500-1000(日)</div>

          </div>

     </div>

 </body>

 </html>

/*透明度设置的两种方式,以及hover的用法,fixed,(relative,absolute)这两个一起用*/的更多相关文章

  1. 百度贴吧自动回帖的两种方式，使用requests（urllib2）和selenium两种方式回帖

    本文介绍,回复贴吧指定某楼层主的帖子的方法.在这里不介绍无限发主贴和无限回复主贴的方法,无限发主题帖会爆吧,引起别人的反感,并且很容易遭到吧主的封杀:无限回主题帖,会让整个帖子的每楼的回复充满了自己的 ...

  2. [Swift]Alamofire：设置网络请求超时时间【timeout】的两种方式

    两种方式作用相同,是同一套代码的两种表述. 第一种方式:集聚. 直接设置成员属性(全局属性),这种方法不能灵活修改网络请求超时时间timeout. 声明为成员属性: // MARK: - 设置为全局变 ...

  3. 数据存储的两种方式：Cookie 和Web Storage（转）

    数据存储的两种方式:Cookie 和Web Storage   数据存储的两种方式:Cookie 和Web Storage 1.Cookie Cookie的作用就像你去超市购物时,第一次给你办张购物卡 ...

  4. ORACLE导入大量数据的两种方式比较

    不管是开发还是测试,工作中经常需要去批量新增测试数据,但是大量数据的新增速度有时候让我们苦不堪言,下面通过两种方式完成oracle数据的批量新增,比较两种方式的效率. 第一种方式:采用工具导入sql文 ...

  5. ImageView设置边框的两种方式

    转载:http://www.2cto.com/kf/201308/239945.html package cc.testimageviewbounds; import android.os.Bundl ...

  6. java中设置代理的两种方式

    1 前言 有时候我们的程序中要提供可以使用代理访问网络,代理的方式包括http.https.ftp.socks代理.比如在IE浏览器设置代理. 那我们在我们的java程序中使用代理呢,有如下两种方式. ...

  7. [Android]解决3gwap联网失败：联网请求在设置代理与直连两种方式的切换

    [Android]解决3gwap联网失败:联网请求在设置代理与直连两种方式的切换 问题现象: 碰到一个问题,UI交互表现为:联通号码在3gwap网络环境下资源一直无法下载成功. 查看Log日志,打印出 ...

  8. HTML中设置背景图的两种方式

    HTML中设置背景图的两种方式 1.background    background:url(images/search.png) no-repeat top; 2.background-image ...

  9. linux 设置开机启动项两种方式

    原文链接:http://blog.csdn.net/karchar/article/details/52489572 有时候我们需要Linux系统在开机的时候自动加载某些脚本或系统服务. 在解问题之前 ...

随机推荐

  1. rails member collection

    resources :theses do resources :document do get :download, :on => :member end end <a class=&qu ...

  2. Excel 2007中自定义数字格式前要了解的准则

    要在Excel 2007中创建自定义数字格式,首先应了解自定义数字格式的准则,并从选择某一内置数字格式开始.然后,可以更改该格式的任意代码部分,从而创建自己的自定义数字格式. 数字格式最多可包含四个代 ...

  3. Spark- SparkStreaming可更新状态的实例

    Producer package zx.zx.sparkkafka import java.util.Properties import kafka.producer.{KeyedMessage, P ...

  4. 关于HttpURLConnection测试servlet

    把数据POST给服务端后,一定要读取服务端的响应,这是必须的,否则服务端不处理.其实发送的数据被服务端接收后在缓冲中,并不是立即处理的.然后服务端把响应码和内容等反回给客户端.如果客户端只发送不接受, ...

  5. php深入浅出session

    1. session概念 0 2. http协议与状态保持 0 3. 理解cookie 0 4. php中session的生成机制 2 5. php中session的过期回收机制 3 6. php中s ...

  6. mybatis学习第(一)天

    课程安排: Mybatis和springMVC通过订单商品案例驱动 第一天:基础知识(重点,内容量多) 对原生态jdbc程序(单独使用jdbc开发)问题总结 Mybatis框架原理 Mybatis的入 ...

  7. linux命令学习笔记（40）：wc命令

    Linux系统中的wc(Word Count)命令的功能为统计指定文件中的字节数.字数.行数,并将统计结果显示输出. ．命令格式: wc [选项]文件... ．命令功能: 统计指定文件中的字节数.字数 ...

  8. redis学习--Hashes数据类型

    本文转自:http://www.cnblogs.com/stephen-liu74/archive/2012/03/19/2352932.html 一.概述: 我们可以将Redis中的Hashes类型 ...

  9. 基于libRTMP的流媒体直播之 AAC、H264 推送

    这段时间在捣腾基于 RTMP 协议的流媒体直播框架,其间参考了众多博主的文章,剩下一些细节问题自行琢磨也算摸索出个门道,现将自己认为比较恼人的 AAC 音频帧的推送和解析.H264 码流的推送和解析以 ...

  10. Agc016_D XOR Replace

    传送门 题目大意 给定两个长为$n$的序列$A,B$你可以进行若干组操作,每次操作选定一各位置$x$,令$A_x$等于$A$的异或和. 问能否通过一定操作使得$A$成为$B$,如果能,求最小操作书数. ...