代码：

<!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. 常见VPS buy地址

    ***,也是最适合新手使用的: https://bwh1.net/ (支持支付宝) vultr,以下是我的分享链接: https://www.vultr.com/(支持支付宝) SugarHosts: ...

  2. 你的Android应用完全不需要那么多的权限

    Android系统的权限从用户的角度来看有时候的确有点让人摸不着头脑.有时候可能你只需要做一些简单的事情(对联系人的信息进行编辑),却申请了远超你应用所需的权限(比如访问所有联系人信息的权限). 这很 ...

  3. 【剑指Offer学习】【面试题47：不用加减乘除做加法】

    题目:写一个函数,求两个整数之和,要求在函数体内不得使用+.-.×.÷四则运算符号. 解题思路 5 的二进制是101, 17 的二进制是10001 .还是试着把计算分成三步:第一步各位相加但不计进位. ...

  4. 【Codeforces】512C Fox and Dinner

    [解析]欧拉筛法,奇偶分析.建二分图,网络流 [Analysis] http://blog.csdn.net/qq574857122/article/details/43453087. 所谓的连通块就 ...

  5. cocos2dx 触摸钢琴

    1.触摸钢琴项目描写叙述 1.1触摸钢琴功能描写叙述 实现手指点按琴键发出相应的音调,按下位置出现星云的粒子特效,滚动实现移动到别的琴键的位置,按下安卓返回键运行关闭. 1.2触摸钢琴所需技术 粒子特 ...

  6. MetaSploit攻击实例讲解------终端下PostgreSQL数据库的使用（包括kali linux 2016.2(rolling) 和 BT5）

    不多说,直接上干货! 配置msf连接postgresql数据库 我这里是使用kali linux 2016.2(rolling)   用过的博友们都知道,已经预安装好了PostgreSQL. 1. p ...

  7. [ SQLServer ] 數字類型的欄位細節 - 轉載

    [MSSQL] 欄位開立(2) - decimal, numeric, float, real, money 的抉擇 https://dotblogs.com.tw/henryli/2015/06/1 ...

  8. js实现观察者模式风格替换

    如下图,我们看到两种风格:在选择男士时,页面颜色为黑色:在选择女士时,页面颜色为粉红色. 主要可以分为两类: 下拉框 ---> 被观察者 div ---> 观察者 面向过程实现风格替换: ...

  9. ES6学习笔记（十四）Generator函数

    清明时节雨纷纷,路上行人欲断魂. 借问酒家何处有,牧童遥指杏花村. 二零一九年农历三月初一,清明节. 1.简介 1.1.基本概念 Generator 函数也是 ES6 提供的一种异步编程解决方案,据说 ...

  10. lsof---查看你进程开打的文件

    lsof命令用于查看你进程开打的文件,打开文件的进程,进程打开的端口(TCP.UDP).找回/恢复删除的文件.是十分方便的系统监视工具,因为lsof命令需要访问核心内存和各种文件,所以需要root用户 ...