<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<meta name="viewport" content="width=device-width,inital-scale=1.0,maximum-scale=1.0,user-scalable=no">

	<title>全屏的渐变背景</title>

</head>

<style>

*{margin: 0;padding: 0;}

.test{

	width:100%;

	height: 500px;

	background:-webkit-linear-gradient(top,#3048b6,#ffcdd6);

	background:-webkit-gradient(linear, 0 0, 100% 100%, from(#ffcdd6),to(#3048b6));

	background:-webkit-linear-gradient(-135deg, #e87715, #fba860);

}

</style>

<body>

<div class="test"></div>

<script src="scripts/jquery-1.7.1.min.js"></script>

<script>

	 $('.test').css('height',$(window).height());

</script>

</body>

</html>

　　

jquery /css3 全屏的渐变背景的更多相关文章

  1. css3全屏背景图片切换特效

    效果体验:http://hovertree.com/texiao/css3/10/ 一般做图片切换效果,都会使用JS或者jQuery脚本,今天发现,其实只用CSS也可以实现.试试效果吧. 效果图: 代 ...

  2. AnimatedModal.js – CSS3 全屏模态窗口

    AnimatedModal.js 是一个用来创建一个全屏模态窗口的 jQuery 插件,基于 CSS3 过渡实现.您可以利用 Animate.css 中的转换或自行创建自己的过渡效果.支持 Firef ...

  3. jQuery/CSS3大屏下拉菜单 自定义子菜单内容

    这是一款样式很酷的jQuery/CSS3下拉菜单,首先这款CSS3菜单是宽屏的,主要是下拉菜单非常大气,更重要的是,下拉菜单的内容可以自己定义,也就是说,下拉菜单中可以定义菜单.图片等HTML元素,是 ...

  4. jQuery插件开发——全屏切换插件

    这个插件包含三个部分:HTML结构.CSS代码和JS代码. HTML结构是固定的,结构如下: <!--全屏滚动--> <div class="fullpage-contai ...

  5. 第161天：CSS3实现兼容性的渐变背景(gradient)效果

    CSS实现兼容性的渐变背景(gradient)效果 一.有点俗态的开场白 在对CSS3支持日趋完善的今天,实现兼容性的渐变背景效果已经完全成为可能,本文就将展示如何实现兼容性的渐变背景效果.在众多的浏 ...

  6. 一款基于jQuery的全屏广告图片焦点图

    之前为大家分享了很多jQuery焦点图插件.今天我们要介绍的这款jQuery全屏广告图片焦点图插件也非常不错,图片切换时有淡出淡出的动画效果,并且也相当流畅.效果图如下: 在线预览   源码下载 实现 ...

  7. jQuery 扩展 全屏切换

    (function ($) { //全屏切换方法 $.fn.toggleFullScreen = function (qp1, qp2) { var fullFlag = false; var _qp ...

  8. css3全屏背景显示

    background:url(zhongyi2.png) no-repeat center center fixed;/* -webkit-background-size:cover; -moz-ba ...

  9. jquery.fullpage 全屏滚动

    参考文档 :http://www.dowebok.com/77.html 下载地址: https://github.com/alvarotrigo/fullPage.js 1. 使用 HTML < ...

随机推荐

  1. SoapUI中Code多行显示设置

    你们的SoapUI 有设置下面的选项吗? Before adding your project, we recommend that you enable the following ReadyAPI ...

  2. Buildroot構建指南--Overview【转】

    本文转载自:http://www.unixlinux.online/unixlinux/linuxjc/gylinux/201703/65218.html Buildroot構建指南--Overvie ...

  3. Android中onInterceptTouchEvent、dispatchTouchEvent及onTouchEvent的调用顺序及内部原理

    在Android中需要经常对用户手势进行判断,在判断手势时需要精细的分清楚每个触摸事件以及每个View对事件的接收情况,在View,ViewGroup,Activity中都可以接收事件,在对事件进行处 ...

  4. SQLite数据库框架--FMDB简单介绍

    1.什么是FMDB FMDB是iOS平台的SQLite数据库框架 FMDB以OC的方式封装了SQLite的C语言API 2.FMDB的优点 使用起来更加面向对象,省去了很多麻烦.冗余的C语言代码 对比 ...

  5. 1.jeesite环境搭建

    安装部署 1. 运行Maven目录下的settings.bat文件,用来设置maven仓库路径,并按提示操作(设置PATH系统变量.配置Eclipse). 2. 执行jeesite/bin/eclip ...

  6. Markdown——让你专注写作

    Markdown--让你专注写作 前些日子,写作的时候总会因为排版而耽误时间,甚至因为排版而把写作的专注力转移到了貌似相关的排版上.诚然,一个好的排版,会让读者有良好的体验,可是对于写作的人来说,这却 ...

  7. 机器学习--DIY笔记与感悟--①K-临近算法

    ##“计算机出身要紧跟潮流” 机器学习作为如今发展的趋势需要被我们所掌握.而今我也需要开始learn机器学习,并将之后的所作所想记录在此. 今天我开始第一课--K临近算法. 一.k-临近的基础概念理解 ...

  8. .NET Core 跨平台物联网开发：SDK 属性、方法、委托、类(四)

    系列教程目录 (一) 连接阿里云IOT (二) 设置委托事件 (三) 上报属性 (四)  SDK文档 属性.方法.委托.类 http://pan.whuanle.cn/index.php?dir=up ...

  9. Luogu P2158 [SDOI2008]仪仗队【数学/欧拉函数】by cellur925

    题目描述 作为体育委员,C君负责这次运动会仪仗队的训练.仪仗队是由学生组成的N * N的方阵,为了保证队伍在行进中整齐划一,C君会跟在仪仗队的左后方,根据其视线所及的学生人数来判断队伍是否整齐(如下图 ...

  10. 给Ambari集群里安装基于Hive的大数据实时分析查询引擎工具Impala步骤（图文详解）

    不多说,直接上干货! Impala和Hive的关系(详解) 扩展博客 给Clouderamanager集群里安装基于Hive的大数据实时分析查询引擎工具Impala步骤(图文详解) 参考 horton ...