需要的效果如图，图片下方加个遮掩层：
html：
css：
.listContent>div{
width:300px;
height: 300px;
float: left;
margin-top: 20px;
margin-left: 20px;
position:relative;
}
.mask{
width:300px;
height: 40px;
background-color:#FFCCCC;
position: absolute;
margin-top: -40px;
opacity: 0.8;
}
原理，父级定位属性值为relative，遮掩层定位属性值为absolute。
CSS 背景图片的定位和缩放
在 CSS 中,利用 background-image 属性我们可以指定元素的背景图片,例如: .example { background-image: url(image/some.png); ba ...
css背景图片定位练习(一)
首先准备一张雪碧图,Like this 背景图片的定位方法有3种,比较常用的两种为 关键字:background-position: top left; (top/bottom/cennter/lef ...
CSS背景图片定位
原文:CSS背景图片定位 在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图 ...
CSS盒模型和定位的类型
此文根据Steven Bradley的所译,整个译文带有我自己的理解与思想,如果译得不好或不对之处 ...
javascript焦点图(根据图片下方的小框自动播放)
html和css就不详细说明了,也是简单布局,通过定位把跟随图片的小框,定位到图片下方
奇妙的CSS之布局与定位
前言 关于布局与定位是Web前端开发里非常基础而又重要的部分.介绍相关知识的文章,很容易就可以找到.虽然,这方面的知识点不是很多,但我们如果不弄清楚,在运用时候往往会出现预料之外的布局,这些“意外”有 ...
Jquery+css实现图片无缝滚动轮播
Today,在XX学院的教学视频中,偶尔看到了Jquery+css实现图片无缝滚动轮播视频教程,虽然以前已写过类似的,但是我感觉他学的比较精简.为了方便以后做项目时直接拷贝,特地写出来,顺便和大家分享 ...
FE: CSS固定图片显示大小及GitHub Pages在线演示
CSS固定图片显示大小 分析 假设图片区域的大小固定为250×300px,那么我们可以写出如下的样式 .picture-area { width: 250px; height: 300px; marg ...
随机推荐
CentOS防火墙问题
问题背景 在Vmware虚拟机中安装了 CentOS 7 的 Linux 版本,并在其中安装了 Oracle 11g 数据库,数据库可以在虚拟机中顺利启动,本地主机也可以 ping 通 linux.准 ...
课务IOS概述_1
1.网络 2.多线程 3.各种图形 4.动画 5.面向对象的数据库 Preconditions: 1.CS106 A和B 或CS106X 2.CS107或CS108更好 3.CS110就更好了 熟 ...
WCF与WebService之间的异同
下面我们来详细讨论一下二者的区别.Web Service和WCF的到底有什么区别. 1,Web Service:严格来说是行业标准,也就是Web Service 规范,也称作WS-*规范,既不是框架, ...
ANDROID_MARS学习笔记_S05_006_距离传感器
import android.app.Activity; import android.content.Context; import android.hardware.Sensor; import ...
Java学习笔记之——多线程
多线程编程 程序: 进程:一个程序运行就会产生一个进程 线程:进程的执行流程,一个进程至少有一个线程,称为主线程 如:QQ聊着天,同时在听音乐 一个进程可以有多个线程,多个线程共享同一个进程的资源 线 ...
poj 2236 Wireless Network (并查集)
链接:http://poj.org/problem?id=2236 题意: 有一个计算机网络,n台计算机全部坏了,给你两种操作: 1.O x 修复第x台计算机 2.S x,y 判断两台计算机是否联通 ...
Mac 上fopen总返回NULL
全局,相对路径都不行, 在沙盒中获取也不行 //在沙盒中获取Documents的完整路径 NSString * path = [NSSearchPathForDirectoriesInDomains( ...
全网最详细的Windows系统里Oracle 11g R2 Client客户端(64bit)安装后的初步使用(图文详解)
不多说,直接上干货! 前期博客 全网最详细的Windows系统里Oracle 11g R2 Client(64bit)的下载与安装(图文详解) 命令行方式测试安装是否成功 1) 打开服务(cmd— ...
Python istitle() 方法
描述 istitle() 方法检测字符串中所有的单词拼写首字母是否为大写,且其他字母为小写. 语法 istitle() 方法语法: S.istitle() 参数 无. 返回值 如果字符串中所有的单词拼 ...
