<!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. Masonry 比例（multipliedBy）

    前言 说到iOS自动布局,有很多的解决办法.有的人使用xib/storyboard自动布局,也有人使用frame来适配.对于前者,笔者并不喜欢,也不支持.对于后者,更是麻烦,到处计算高度.宽度等,千万 ...

  2. Java 并发 —— 读写锁（ReadWriteLock）

    读写锁(ReadWriteLock),顾名思义,就是在读写某文件时,对该文件上锁. 1. ReentrantReadWriteLock 三部曲: 加锁: 读写操作: 解锁:(为保证解锁操作一定执行,通 ...

  3. Synchronized的使用和注意事项

    synchronized: 1.取得的锁都是对象锁,而不是把一段代码或方法(函数)当作锁: 2.多个线程访问的必须是同一个对象. 3.当一个线程执行的代码出现异常时,其所持有的锁会自动释放 4.A线程 ...

  4. bzoj 1014 火星人prefix —— splay+hash

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1014 用 splay 维护字符串上不同位置的哈希值还是第一次... 具体就是每个节点作为位置 ...

  5. center os 安装mysql5.6

    软件 MySQL-server-5.6.13-1.el6.x86_64.rpm MySQL-client-5.6.13-1.el6.x86_64.rpm 安装命令 rpm -ivh MySQL-ser ...

  6. WinHTTrack

    看过<大湿教我写.net通用权限框架(1)之菜单导航篇>之后发生的事 http://www.cnblogs.com/wolf-sun/p/3436585.html 用此工具下载别人整站的图 ...

  7. PCB AdminMongo安装使用

    AdminMongo是针对Mongodb设计的一款Web端可视化工具,它是使用Node.js编写,这里将安装过程记录一下. 一.下载AdminMongo 前题:安装使用adminMongo需提前安装好 ...

  8. PCB Web版SI9000阻抗计算器

    在几个月前写过一遍关于: PCB SI9000阻抗计算引擎Web方式实现方法  ,最近开始参考Polar SI9000的界面,将阻抗计算器转为网页版的方式实现.   一.Web版SI9000阻抗计算器 ...

  9. Intellij IDEA 快捷键整理（史上最全）

    [常规] Ctrl+Shift + Enter,语句完成 “!”,否定完成,输入表达式时按 “!”键 Ctrl+E,最近的文件 Ctrl+Shift+E,最近更改的文件 Shift+Click,可以关 ...

  10. SQL 初级教程学习（四）

    1. union,union all SELECT E_Name FROM Employees_ChinaUNIONSELECT E_Name FROM Employees_USA 默认地,UNION ...