<!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. YTU 2580: 改错题----修改revert函数

    2580: 改错题----修改revert函数 时间限制: 1 Sec  内存限制: 128 MB 提交: 194  解决: 82 题目描述 修改revert函数,实现输入N个数,顺序倒置后输出 #i ...

  2. Ubuntu18开启redis服务自启动

    设置redis服务开机自启动. 1.创建配置文件夹 sudo mkdir /etc/redis sudo cp /usr/local/redis/redis.conf /etc/redis sudo ...

  3. 《Visual C++ 2010入门教程》系列三：关于C++的一些问题

    <Visual C++ 2010入门教程>系列三:关于C++的一些问题   这一回我自己都不知道应该写点什么好,或许今天的篇幅会比往常短很多.我说过,这不是C++的教程,因为我还没有那个能 ...

  4. Python+页面元素高亮源码实例

    简单写了一个页面元素高亮的方法,原理就是在python中调用js实现元素高亮,分享一下源码如下: 1.元素高亮源码 Js调用 js = "var q=document.getElementB ...

  5. hdu3709 (平衡数) 数位DP

    Balanced Number Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Others) ...

  6. Bootstrap指定表格字段宽度

    默认情况下,表格会占据屏幕所有宽度,可以使用bootstrap的布局功能.但表格标题字段的宽度必须与相应字段内容的宽度一致. <div class="container"&g ...

  7. asp.net MVC5 中的捆绑和更改bootstap默认的样式

    在MVC5的视图中使用@Scritps.Render(),@Styles.Render() 分别可以加载样式和脚本.捆绑的和实际的路径都可以. 并且可以利用 编程的方式灵活引用css文件和脚本文件. ...

  8. USACO Training3.3 A Game【区间Dp】 By cellur925

    题目传送门 一股浓浓的博弈论香气...然而本蒟并不会博弈论. 开始用双端队列+假的dp水过了24pts水数据. 其实是布星的,两人都绝顶聪明会深谋远虑不像我只看眼前,所以上述算法错误. 正解:区间dp ...

  9. [ZOJ1961]Let it Bead

    Description "Let it Bead" company is located upstairs at 700 Cannery Row in Monterey, CA. ...

  10. 浅谈算法——线段树之Lazy标记

    一.前言 前面我们已经知道线段树能够进行单点修改和区间查询操作(基本线段树).那么如果需要修改的是一个区间该怎么办呢?如果是暴力修改到叶子节点,复杂度即为\(O(nlog n)\),显然是十分不优秀的 ...