<!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. LeetCode：字符串的排列【567】

    LeetCode:字符串的排列[567] 题目描述 给定两个字符串 s1 和 s2,写一个函数来判断 s2 是否包含 s1 的排列. 换句话说,第一个字符串的排列之一是第二个字符串的子串. 示例1: ...

  2. jQuery：[1]实现图片上传并预览

    jQuery:[1]实现图片上传并预览 原理 预览思路 1.当上传对象的input被触发并选择本地图片之后获取要上传的图片对象的URL: 2.把对象URL赋值给实现写好的img标签的src属性 Fil ...

  3. Oracle数据库体系结构（7) 表空间管理1

    表空间是Oracle数据库最大的逻辑存储结构,有一系列段构成.Oracle数据库对象存储结构的管理主要是通过表空间的管理实现的. 1.表空间的分类 表空间根据存储类型不同分为系统表空间和非系统表空间 ...

  4. Recovery模式【转】

    本文转载自:http://tieba.baidu.com/p/2299027486 Recovery模式是手机系统的一个工程模式,作用是恢复和清除.用户进入这个模式之后,可以对当前系统的一些数据进行清 ...

  5. nginx源码中upstream的主要流程

    upstream 即上游的意思,是一个想对到概念,从客户端到中间的网络链路到服务器到链路中,可以将越接近客户到设备越理解成下游,相反到为上游,所以如果只有一个upstream,可以将其为理解成转发客户 ...

  6. Python- and & or 的短路原则

    条件1 and 条件2 条件1 or 条件2 短路原则 对于and 如果前面的第一个条件为假,那么这个and前后两个条件组成的表达式的计算结果就一定为假,第二个条件就不会被计算 对于or 如果前面的第 ...

  7. mybatis学习（四）

    创建mybatis工程 工程目录: 具体步骤: 1.创建sqlMapConfig.xml文件,配置mybatis的运行环境,事物,数据源,加载mapper映射文件等. 2.创建po类(查询或者返回的属 ...

  8. Convolutional Neural Networks for Visual Recognition 7

    Two Simple Examples softmax classifier 后,我们介绍两个简单的例子,一个是线性分类器,一个是神经网络.由于网上的讲义给出的都是代码,我们这里用公式来进行推导.首先 ...

  9. 机器学习 Generative Learning Algorithm (A)

    引言 前面几讲,我们主要探讨了如何对 p(y|x;θ) (即y 相对于x的条件概率)进行建模的几种学习算法,比如,logistic regression 对 p(y|x;θ) 进行建模的假设函数为 h ...

  10. [原]NYOJ-开灯问题-77

    大学生程序代写 //http://acm.nyist.net/JudgeOnline/problem.php?pid=77 /*题目77题目信息运行结果本题排行讨论区开灯问题 时间限制:3000 ms ...