代码：

<!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 背景过度实现的更多相关文章

  1. CSS3背景温故

    1.背景的五种基本属性background-color(背景颜色)background-image(背景图片)background-repeat(背景图片展示方式)background-attachm ...

  2. css3 背景记

    css3 背景 css背景主要包括五个属性: background-color background-color:transparent || <color> 用来设置元素的背景颜色,默认 ...

  3. CSS自学笔记（11）:CSS3背景和边框

    CSS3 背景 在CSS3中新增了多个关于背景的属性,可以让我们对背景有了更多更好的操作,减少用第三方工具对背景图片进行修改美化. CSS3中主要是通过定义backgrounp中的各个属性来控制背景( ...

  4. 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效

      上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...

  5. 第七十九，CSS3背景渐变效果

    CSS3背景渐变效果 学习要点: 1.线性渐变 2.径向渐变 本章主要探讨HTML5中CSS3背景渐变功能,主要有两种渐变方式:线性渐变和径向 (放射性)渐变. 一．线性渐变 linear-gradi ...

  6. 从零开始学习前端开发 — 17、CSS3背景与渐变

    一.css3背景切割: background-clip:border-box|padding-box|content-box; 作用: 用来设置背景的可见区域 a) border-box 默认值,背景 ...

  7. 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 ...

  8. [转]真正了解CSS3背景下的@font face规则

    本文转自:http://www.zhangxinxu.com/wordpress/2017/03/css3-font-face-src-local/ by zhangxinxu from http:/ ...

  9. css3 背景background

    Css3背景<background> Css3包含多个新的背景属性,它们提供了对背景更强大的控制.可以自定义背景图的大小,可以规定背景图片的定位区域,css3还允许我们为元素使用多个背景图 ...

随机推荐

  1. [WebGL入门]十五，为多边形涂抹颜色（顶点颜色的指定）

    注:文章译自http://wgld.org/.原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上［lufy:］.另外.鄙人webgl研究还不够深入.一些专业词语.假设翻译有误.欢迎大家指 ...

  2. Fragmen直接来回切换deno

    思路: 第一步.建立一个activity.用来管理fragment. 第二步'获取fragmentManger 和fragmentTraction. private FragmentManager f ...

  3. oracle树操作（select .. start with .. connect by .. prior）

    oracle中的递归查询能够使用:select .. start with .. connect by .. prior 以下将会讲述oracle中树形查询的经常使用方式.仅仅涉及到一张表. star ...

  4. linux 下同步异步，堵塞非堵塞的一些想法

    补充: 发现一个更好的解释样例:同步是一件事我们从头到尾尾随着完毕.异步是别人完毕我们仅仅看结果. 堵塞是完毕一件事的过程中可能会遇到一些情况让我们等待(挂起).非堵塞就是发生这些情况时我们跨过. 比 ...

  5. C# Winform 模拟QQ新闻弹出框

    一开始做的时候,觉得这个太简单了.真心做的时候还是遇到了不少的坑啊. 1)循环播放新闻内容,建议使用showdialog(),不要用show(),不太好控制前后之间的停顿. 2)窗口的初始位置为有下角 ...

  6. Vue源代码笔记（一）数据绑定

    VUE数据绑定介绍 数据绑定是vue的基础核心之一,本文以Vue对象(当然也包含VueComponent)里的data数据绑定为例,阐述整个绑定的过程. Vue的数据绑定由三部分组成, Observe ...

  7. 双系统给ubuntu增加分区

    http://www.th7.cn/system/lin/201506/106338.shtml http://www.linuxidc.com/Linux/2012-06/61983.htm 因为本 ...

  8. Codeforces 667C Reberland Linguistics 记忆化搜索

    链接 Codeforces 667C Reberland Linguistics 题意 给你一个字符串,除去前5个字符串后,使剩下的串有长度为2或3的词根组成,相邻的词根不能重复.找到所有的词根 思路 ...

  9. C#篇（二）——属性的实质

    属性的内部实现其实就是方法 我们平时写的代码: class Student { private int age; public int Age { get { return age; } set { ...

  10. codeforces 540 B School Marks【贪心】

    题意:一共n个数,给出其中k个数,要求这n个数的中位数为y,这n个数的和不超过x,补全剩下的n-k个数 先统计给出的k个数里面比中位数小的数, 如果cnt<=n/2,说明中位数还没有出现,把这n ...