html图片渐变怎么实现,css实现背景图片渐变
兼容ie6.7.8.9 firefox,safari,chrome 不兼容opera
css代码:
.gradient{
width:300px;
height:150px;
filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);
-ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);
background:red; /* 一些不支持背景渐变的浏览器 */
background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));
}
上面的滤镜代码主要有三个参数,依次是:startcolorstr, endcolorstr, 以及gradientType。
其中gradientType=1代表横向渐变,gradientType=0代表纵向淅变。startcolorstr=”色彩”
代表渐变渐变起始的色彩,endcolorstr=”色彩” 代表渐变结尾的色彩。
opacity表示透明度,默认的范围是从0 到 100,他们其实是百分比的形式。
也就是说,0代表完全透明,100代表完全不透明。
finishopacity 是一个可选参数,如果想要设置渐变的透明效果,就可以使用他们来指定结束时的透明度。
范围也是0 到 100。
style用来指定透明区域的形状特征:
0 代表统一形状
1 代表线形
2 代表放射状
3 代表矩形。
startx 渐变透明效果开始处的 X坐标。
starty 渐变透明效果开始处的 Y坐标。
finishx 渐变透明效果结束处的 X坐标。
finishy 渐变透明效果结束处的 Y坐标
html代码:
效果图如下:
渐变工具:
http://www.colorzilla.com/gradient-editor/http://samples.msdn.microsoft.com/workshop/samples/author/filter/DropShadow.htm
html图片渐变怎么实现,css实现背景图片渐变相关推荐
- html5背景图片能加链接,CSS中用背景图片做为超链接的方法
Web2.0时代,在网页设计中用背景图片做为超链接已成为主流,通过CSS的控制,使鼠标移到图片上能有很好的变换效果,虽然用普通的插入图片的方法也能实现效果,但用CSS更为方便,再配合css sprit ...
- 网站图片定位代码html5,CSS中背景图片的定位
在CSS中,背景图片的定位方位有3种: (1)关键字:background-position: top right; (2)像素:background-position: 0px 0px; (3)百分 ...
- CSS 背景色 背景图片 渐变背景 - 径向渐变 background-image:radial-gradient()
radial-gradient() 用来生成径向渐变的图片 基础语法 background-image: radial-gradient(shape extent at positionX posit ...
- CSS 背景色 背景图片 渐变背景 - 重复线性渐变 background-image: repeating-linear-gradient()
repeating-linear-gradient() 用来生成重复的线性渐变图案 基础语法 background-image: repeating-linear-gradient(angleValu ...
- html如何把图片在背景图一半,img只显示图片一部分 或 css设置背景图片只显示图片指定区域...
17:14 2016/3/22 img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片 ...
- 纯css实现背景颜色渐变动画
纯css实现背景颜色渐变动画,代码及效果图如下. body {width: 100wh;height: 100vh;color: #fff;background: linear-gradient(-4 ...
- php设置背景图片的代码,css设置背景图片如何实现?(代码实例)
本篇文章给大家带来的内容是关于css设置背景图片如何实现?(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 很多人提交表单时都喜欢用一个图片来作为提交按钮,大多数人可能用J ...
- css样式教程---css控制背景图片-背景相关的css
最近做网站的时候,感觉css使用并不是那么轻松,于是从网上找了点教程看看,感觉还是挺重要的,一个好的CSS代码,只要你熟悉了,以后拿过来之间套上就行了, 真是方面,但是看的那CSS代码总叫人感觉头大, ...
- background-position—CSS设置背景图片的位置
background-position :在 CSS 中通过 background-position 属性可以调整背景图片的位置.因为在默认情况下背景图片都是从设置了 background-posit ...
最新文章
- 算法--运算的最小翻转次数
- linux 下进入oracle,linux 下的oracle怎么启动
- 【业务知识】档案数字化加工处理过程
- linux源码阅读笔记 fork函数
- SpringBoot和MyBatis集成案例(学习笔记)
- centos7 lldb 调试netcore应用的内存泄漏和死循环示例(dump文件调试)
- Perl线程开发过程中的经验
- 终结者:终止线程循环的方式
- PowerBI为企业整体业务流程系统(CRM)提供完整解决方案模板
- uniapp 前端数据显示数据字典值 程序设计
- 计算图的可达矩阵MATLAB程序
- 信号处理学习笔记2——维纳滤波器
- css实现奥运五环(立体)
- Docker网络模式与数据管理
- docker java 内存_Java和Docker限制的那些事儿
- MVC 和 MVVM 详解
- anaconda创建新环境
- 项目管理Markdown (第二周笔记)
- linux centos7 解压tar.gz
- ticwatch能支持鸿蒙吗,我的廉价表盒 篇二:过气的智能手表?出门问问Ticwatch2 一年半断断续续的使用体验...
热门文章
- 升级1台十年的老电脑
- 微信小程序 思维导图
- js去除字符串前后空格
- 第十二章 C语言调试_调试的概念以及调试器的选择
- 太忙,没时间学?在职人员如何高效备考MBA?
- c语言计算年龄的编程,C语言实战开发: 利用if 实现“税后工资”,“输出年龄”...
- linux中启动tomcat后浏览器无法访问的解决方法之防火墙关闭
- (转)有关三方贸易(进口)的操作流程及单证处理
- php联机代码,噬血代码无法联机解决办法
- ios隐藏功能-APP因第三方支付被拒