<!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. linux下tomcat的配置及项目的部署流程

    Java的安装配置 1. 在/etc/profile文件中配置相应的信息(如下) export JAVA_HOME=/usr/java/jdk1.6.0_20 export JRE_HOME=/usr ...

  2. 【LeetCode】:二叉搜索树

    相关概念: 一棵二叉搜索树(BST)是以一棵二叉树来组织的,可以用链表数据结构来表示,其中,每一个结点就是一个对象,一般地,包含数据内容key和指向孩子(也可能是父母)的指针属性.如果某个孩子结点不存 ...

  3. python开发环境必备之vim配置

    俗话说:工欲善其事,必先利其器.最近使用python,习惯了liunx和vim,打算将vim作为python开发工具,下面就配置vim,以让它成为python开发的利器,增强我们的开发体验!废话少说, ...

  4. Spark Structured Streaming框架(5)之进程管理

    Structured Streaming提供一些API来管理Streaming对象.用户可以通过这些API来手动管理已经启动的Streaming,保证在系统中的Streaming有序执行. 1. St ...

  5. 3D卡片折叠动画自定义下拉框

    在线演示 本地下载

  6. apache下配置多域名多目录的应用

    引言:阿里云centos apache web服务器中配置不同域名访问不同的目录,达到类似增加虚拟主机的效果: 案例: 如有2个www.a.com ,www.b.com 域名, 访问www.a.com ...

  7. RSA加密方法java工具类

    package com.qianmi.weidian.common.util; import java.io.ByteArrayOutputStream; import java.security.K ...

  8. Python的标准GUI:Tkinter的组件

    Label组件: Label组件用于显示文本和图像,并且使用双重缓冲 用法: 使用Label组件可以指定想要显示的内容(文本.位图或者图片): from tkinter import * master ...

  9. Javascript- Javascript学习

    Javasrcipt的引入方式 内部引入方式 直接将javascript代码写入到<script type="text/javascript"></script& ...

  10. Hive- Hive 按时间定期插入分区表

    写个shell脚本Hive 按时间定期插入分区表,由于今天统计的是昨天的数据所以日期减一. #!/bin/bash DT=`date -d '-1 day' "+%Y-%m-%d" ...