遮掩java_css之图片下方定位遮掩层

需要的效果如图，图片下方加个遮掩层：

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() 参数 无. 返回值 如果字符串中所有的单词拼 ...