<!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. 使用JSTL 对在页面上对 0,0,1 的分割处理 forTokens

    使用JSTL 对在页面上对 0,0,1 的分割处理 <tr onmouseover="currentcolor=this.style.backgroundColor;this.styl ...

  2. I.MX6 简单电路模拟USB设备的插入

    /**************************************************************************** * I.MX6 简单电路模拟USB设备的插入 ...

  3. mysql数据恢复失败记录

    今天遇到了MySQL有几个数据表空间丢失的问题,作为一个外行尝试好久没恢复成功,考虑到只是几个基础数据表,就删除数据表停止服务,删除ibd文件后再创新创建表解决了问题. 近期的一些事让我不像以前一样钻 ...

  4. bzoj1296 [SCOI2009]粉刷匠——背包

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1296 对于不同木板之间,最终统计答案时做一个分组背包即可: 而要进行分组背包,就需要知道每个 ...

  5. poj 3321(带时间戳 + 区间统计)

    题目描述: 给定一颗树,求某个节点的子树的val值之和 可以用树的前序遍历给每一个节点编号,从而可以确定一个节点的子树的范围,这样就可以进行直接在区间上进行统计了. vector < int & ...

  6. Java多线程系列九——Atomic类

    参考资料:https://fangjian0423.github.io/2016/03/16/java-AtomicInteger-analysis/http://www.cnblogs.com/54 ...

  7. ubuntu 怎么格式化U盘？（转载）

    转自:http://3168247.blog.51cto.com/3158247/605654 图形的话装一个gparted,找那个/dev/sdb,右击选择格式化,最后点“应用”.命令行:原则是先卸 ...

  8. bzoj 4245: [ONTAK2015]OR-XOR【按位贪心】

    知道按位贪心但是不知道怎么贪-- 求一个a的异或前缀和s,然后按位从大到小贪心,ans的当前位能为0的条件是s中有>=m个位置这一位为0且没有flag,并且s[n]的这一位为0 如果符合要求,那 ...

  9. C语言之图像旋转

    最近用到了图像向左或者向右旋转90°的情况,纠结了好一会儿,写下来供大家参考. 1 向左旋转90° //unsigned char *pImgData: 输入图像指针 //int WidthIn, i ...

  10. 员工管理系统（集合与IO流的结合使用 beta3.0 BufferedReader / ObjectOutputStream）

    Employee.java package cn.employee_io; public class Employee { private String empId; private String n ...