【技术分享】CSS 实现渐变色背景

不多说,直接上代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title></title>

<style type="text/css">
.linear{
  width:100%;
  height:600px;
  FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=##15A216,endColorStr=#fafafa); /*IE*/
  background:-moz-linear-gradient(top,#15A216,#fafafa);/*火狐*/
  background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#15A216), to(#fafafa));/*谷歌*/

  background-image: -webkit-gradient(linear,left bottom,left top,color-start(0, #15A216),color-stop(1, #fafafa));/* Safari & Chrome*/
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=‘#15A216‘, endColorstr=‘#fafafa‘); /*IE6 & IE7*/
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=‘#15A216‘, endColorstr=‘#fafafa‘)"; /* IE8 */

}
</style>

</head>

<body>
  <div class="linear"></div>
</body>
</html>

时间: 2024-10-12 12:36:31

【技术分享】CSS 实现渐变色背景的相关文章

用DIV+CSS切割多背景合并图片 CSS Sprites 技术

很久之前就在互联网网站和一些js插件中见过这种技术的应用,当时觉得很麻烦,就没有用,也没有去深究. 近段时间一直在做前台的一些东西,涉及到很多div+css的问题.这个东东我又碰到了,所以我花了点时间去网上了解了下其中的原理.原来这个叫CSS Sprites技术,主要是个人爱好啦,我对前台这些个东西比较感兴趣,所以会去了解多一点. 废话不多说,直接上我做的小例子: 这是一张多个小背景的图片合并而成的图片,当我们想要在页面上只显示其中我们需要的区域时,我们就需要将其“切”出来. Java代码  

CSS Sprites 网页背景图片定位技术简述

很多时候我们打开一些网站的背景图片会发现是很多图标集合的一张完整的图片.这种网页使用的就是CSS Sprite,通过将多个图标整合在同一张图片,可以减少向服务器请求图片的次数,加快网页的加载速度. CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了.对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以

Coding for Speed 技术分享

上周和公司技术同事们作了次<Coding for Speed>技术分享,本来这只是再普通不过的技术探讨和交流(虽然挂了个颇有噱头的名称),但分享的时候逻辑没理好,语速很快,时间也太紧,因此难言是合格的"分享"."探讨",所以我觉得有必要以简短的文章形式对原 PPT 作点补充,即便分享的内容很少也很简单. 本文将按原 PPT 的内容顺序分别作扩展说明或阐述,部分敏感信息将隐去,或只会简单提及. 作本技术分享的初衷,一是在工作中了解及接触了一些我个人认为可优

UWP 手绘视频创作工具技术分享系列

开篇先来说一下写这篇文章的初衷. 初到来画,通读了来画 UWP App 的代码,发现里面确实有很多比较高深的技术点,同时也是有很多问题的,扩展性,耦合,性能,功能等等.于是我们决定从头重构这个产品,做一个全新的 “来画Pro” 出来,历经三个月的世间,这个产品终于正式上架. (做个小广告,在 Windows 应用商店搜索 “来画Pro” 就可以找到,目前公司定位为收费应用,但是有一个月试用期,如果大家感兴趣,可以跟我要免费代码.这里是 IT之家的报道:https://www.ithome.com

UWP 手绘视频创作工具技术分享系列 - SVG 的解析和绘制

本篇作为技术分享系列的第一篇,详细讲一下 SVG 的解析和绘制,这部分功能的研究和最终实现由团队的 @黄超超 同学负责,感谢提供技术文档和支持. 首先我们来看一下 SVG 的文件结构和组成 SVG (Scalable Vector Graphics) 是一种可缩放矢量图形,使用 XML 格式来定义,是一种 W3C 标准,图像在放大或改变尺寸的情况下其图形质量不会有所损失. 下面是一个简单的 SVG 的文件结构例子: <?xml version="1.0" standalone=&

ArcGIS最权威、最专业的技术分享网站:积思园(www.iarcgis.com)

你对iArcGIS.com说点什么 为什么会有该网站的产生 在这个所谓的“大数据”的时代,每个人都深陷于海量信息无法自拔,因为过多碎片化的数据只会让自己的思维更加迷离,快餐式的阅读只会让自己变得虚胖.iArcGIS.com团队正在试图以工匠精神把最纯粹.最优秀.最及时.最专业的ArcGIS技术进行分享. 怎么在该网站获取技术资料 1:直接进入www.iarcgis.com进行首页的浏览,我们每天都会更新一些技术文章.而且也可以关注我们为你推荐的四个置顶幻灯片,点击即可进入. 2:在菜单栏,我们按

公开运维技术分享的一些经验

技术分享三条实战经验: ● 良好的逻辑性 ● 自己真实经验总结 ● 多练习 首先,说明下,我不是技术分享高手,分享了次数比较多,有点心得:另外,听的分享多了,对好坏也有一些感受. 还有,在此特别感谢下西山居的运维开发架构师,<Puppet实战>的作者刘宇,我的许多分享经验来自于宇哥,并且得到了宇哥多次的,一对一贴身的,手把手的指点. 一 什么是成功的技术分享 判断分享是否成功,关键是看自己要传递的想法,有没有被听众理解和接受,技术分享不是川普竞选,不追求热闹的效果,也不追求所有人都能听懂,一次

我来分享一个快速设置背景的js

我来分享一个快速设置背景的js (需要jq支持!) 快速切图铺页面用---就是不需要手动输入背景图的长宽 自动获取背景图的长宽 : <div class="wrap"> <div style="background: url(images/by_01.jpg) no-repeat top center;"></div> <div style="background: url(images/by_02.jpg) no

知乎技术分享:从单机到2000万QPS并发的Redis高性能缓存实践之路

本文来自知乎官方技术团队的"知乎技术专栏",感谢原作者陈鹏的无私分享. 1.引言 知乎存储平台团队基于开源Redis 组件打造的知乎 Redis 平台,经过不断的研发迭代,目前已经形成了一整套完整自动化运维服务体系,提供很多强大的功能.本文作者陈鹏是该系统的负责人,本次文章深入介绍了该系统的方方面面,值得互联网后端程序员仔细研究. (本文同步发布于:http://www.52im.net/thread-1968-1-1.html) 2.关于作者 陈鹏:现任知乎存储平台组 Redis 平