css3 背景过度实现
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>Document</p>
<style>
*{
margin:0;
padding:0;
}
img{
border:none;
outline:none;
}
.icon-img{
display: block;
border: 2px solid #fff;
position: relative;
background-color: #fff;
overflow: hidden;
margin-right: 7px;
margin-bottom: 7px;
width: 100%;
height: 315px;
width:240px;
margin:50px auto;
position:relative;
padding:100px;
background:rgb(248, 24, 87);
}
.icon-img a{
display:block;
background-color:rgba(255,255,255,.7);
-webkit-transition:background-color .4s;
-ms-transition:background-color .4s;
-o-transition:background-color .4s;
-moz-transition:background-color .4s;
transition:background-color .4s
}
.icon-img a:hover{
background:#fff;
}
</style>
<!-- 这里的前提是图片必须是png透明的 最外层背景也是红色背景的 -->
<div class="icon-img">
<div style="height: 230px; position: relative;">
<a href="">
<img style="width: 100%; height: 230px;" src="http://img.alicdn.com/imgextra/i1/182/TB28YSBXH1J.eBjSszcXXbFzVXa_!!182-2-yamato.png_240x5000q100.jpg_.webp" alt="" width="100%" />
</a>
</div>
</div>
</body>
</html>
css3 背景过度实现的更多相关文章
- CSS3背景温故
1.背景的五种基本属性background-color(背景颜色)background-image(背景图片)background-repeat(背景图片展示方式)background-attachm ...
- css3 背景记
css3 背景 css背景主要包括五个属性: background-color background-color:transparent || <color> 用来设置元素的背景颜色,默认 ...
- CSS自学笔记(11):CSS3背景和边框
CSS3 背景 在CSS3中新增了多个关于背景的属性,可以让我们对背景有了更多更好的操作,减少用第三方工具对背景图片进行修改美化. CSS3中主要是通过定义backgrounp中的各个属性来控制背景( ...
- 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效
上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...
- 第七十九,CSS3背景渐变效果
CSS3背景渐变效果 学习要点: 1.线性渐变 2.径向渐变 本章主要探讨HTML5中CSS3背景渐变功能,主要有两种渐变方式:线性渐变和径向 (放射性)渐变. 一.线性渐变 linear-gradi ...
- 从零开始学习前端开发 — 17、CSS3背景与渐变
一.css3背景切割: background-clip:border-box|padding-box|content-box; 作用: 用来设置背景的可见区域 a) border-box 默认值,背景 ...
- css3背景颜色渐变属性 兼容性测试基础环境为:windows系统;IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+
css3背景颜色渐变属性 兼容性测试基础环境为:windows系统:IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+ 语法: <li ...
- [转]真正了解CSS3背景下的@font face规则
本文转自:http://www.zhangxinxu.com/wordpress/2017/03/css3-font-face-src-local/ by zhangxinxu from http:/ ...
- css3 背景background
Css3背景<background> Css3包含多个新的背景属性,它们提供了对背景更强大的控制.可以自定义背景图的大小,可以规定背景图片的定位区域,css3还允许我们为元素使用多个背景图 ...
随机推荐
- 安装了python之后Windows的cmd中cd指令无法转换路径怎么办?
1首先我们看看盘符,我的电脑里有 C D E,F. G盘. 2按下WIN+R键 输入cmd,打开cmd窗口. 3默认路径为用户文档路径,如果想切换到D盘 ,输入cd d: 是不行的. 4:AppDat ...
- GenIcam标准(四)
2.8.可用的节点类型 本章对每个可用的节点类型提供一个概要的描述,包括其功能.用途以及最关心的参数.另外,对于每个节点在GenICam标准的XML格式文件中的layout,会有一个正式的说明.这个格 ...
- 【BZOJ 1150】[CTSC2007]数据备份Backup
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 选择的连接肯定是相邻的点对. 那么我们处理出来长度为n-1的数组a 其中a[i-1] = dis[i]-dis[i-1] 那么问题就 ...
- 【转】C#正则表达式教程和示例
[转]C#正则表达式教程和示例 有一段时间,正则表达式学习很火热很潮流,当时在CSDN一天就能看到好几个正则表达式的帖子,那段时间借助论坛以及Wrox Press出版的<C#字符串和正则表达式参 ...
- ActiveMQ maven
http://outofmemory.cn/java/mq/apache-activemq-demo
- POJ——T2446 Chessboard
http://poj.org/problem?id=2446 Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 18560 ...
- 获取系统信息(CPU、内存等)
简述 获取计算机CPU.主板.内存.硬盘.网卡这些信息,Qt中没有相应的处理,所以需要根据平台来做差异化处理.也许Qt为了跨平台,没有提供与操作系统和硬件密切相关的一些功能(如内存.CPU.硬盘等相关 ...
- CSS透明度设置支持IE,Chrome,Firefox浏览器
CSS文件里设置例如以下就可以 filter:alpha(opacity=60); //支持IE opacity:0.6; //支持Chrome.Firefox
- 安卓实训第四天--基于HttpClient来完毕数据在server和设备间的交互。
上午:老师首先回想了昨天作业. 首先在安卓project中的TOOLS文件里,解析字节流那里,不用改变.而是把server端的编码方式变为UTF-8,然后将在安卓project的LoginActivi ...
- 英语影视台词---四、Sideways
英语影视台词---四.Sideways 一.总结 一句话总结:杯酒人生 Sideways,大致意思是“偏离.倾斜.转向…”.很明显中文译名与英文原名并没有什么关联,<杯酒人生>这个名字,其 ...