在CSS中背景图片的填充方法：

background-position:x,y(背景图片x,y轴的定位)

background-repeat:no-repeat(不平铺)

background-repeat:repeat-x(水平方向平铺)

background-repeat:repeat-y(垂直方向平铺)

　主要是css样式：

*{

    margin:;

    padding:;

}

html{

    /* This image will be displayed fullscreen */

    background:url('http://images.cnblogs.com/cnblogs_com/caidupingblogs/828702/o_QQ%e6%88%aa%e5%9b%be20151028154841.png') no-repeat center center;

    /* Ensure the html element always takes up the full height of the browser window */

    min-height:100%;

    /* The Magic */

    background-size:cover;

}

body{

    /* Workaround for some mobile browsers */

    min-height:100%;

    font:14px/1.3 'Segoe UI',Arial, sans-serif;

}

a, a:visited {

    outline:none;

    color:#1c4f64;

}

a:hover{

    text-decoration:none;

}

section, footer, header{

    display: block;

}

footer{

    background-color: #111111;

    bottom:;

    box-shadow: 0 -1px 2px rgba(0,0,0,0.4);

    height: 45px;

    left:;

    position: fixed;

    width: 100%;

    z-index:;

}

footer h2{

    color: #EEEEEE;

    font-size: 14px;

    font-weight: normal;

    left: 50%;

    margin-left: -400px;

    padding: 13px 0 0;

    position: absolute;

    width: 540px;

}

footer h2 i{

    font-style:normal;

    color:#888;

}

footer a.tzine,a.tzine:visited{

    color: #999999;

    font-size: 12px;

    left: 50%;

    margin: 16px 0 0 110px;

    position: absolute;

    text-decoration: none;

    top:;

}

footer a i{

    color:#ccc;

    font-style: normal;

}

footer a i b{

    color:#c92020;

    font-weight: normal;

}

backgroundimagestyles.css

而你肯定想不到“主”代码是非常简单的，哈哈。

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8" />

        <title>CSS之生成全屏背景图片</title>

        <link rel="stylesheet" href="http://files.cnblogs.com/files/caidupingblogs/backgroundimagestyles.css" />

    </head>

    <body>

    </body>

</html>

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>CSS之生成全屏背景图片</title>
<link rel="stylesheet" href="http://files.cnblogs.com/files/caidupingblogs/backgroundimagestyles.css" />
</head>
<body>
</body>

CSS之生成全屏背景图片的更多相关文章

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

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

  2. css2如何设置全屏背景图片

    每次在做一个网站后台登陆页面的时候,当UI给我一张背景是不规律的背景图片,但是在设置为背景时,总会遇到屏幕大小的问题,导致背景图片有可能平铺.这样UI的效果达不到也会很难看. 本来我想用body{ba ...

  3. [css]全屏背景图片设置,django加载图片路径

    <head><style type="text/css"> #bg { position:fixed; top:; left:; width:100%; h ...

  4. css 设置全屏背景图片

    <div id="div1"><img src="img.jpg" /></div> div#div1{ position: ...

  5. css设置页面全屏背景

    .background { background: url(xxx.png); background-size: 100% 100%; height: 100%; position: fixed; w ...

  6. H5-设置全屏背景图片样式

    .bgimg{ width: 100%; height: 95vh; margin: 0; padding: 0 .32rem; background-image: url('../image/ld. ...

  7. CSS之全屏背景图

    吐槽啦:Yeah  明天就是国庆了o(*￣▽￣*)o!哈哈,提前祝福各位园友国庆快乐.假期愉快.生活美满.天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~ 言 ...

  8. HTML5全屏背景视频与 CSS 和 JS（插件或库）

    译文原链接:http://codetheory.in/html5-fullscreen-background-video/ 前言: 当网页载入时,自动播放的全屏背景视频已经成为当前颇受欢迎的趋势. 就 ...

  9. jquery-自适应全屏背景轮播动画

    实时自适应浏览器窗口大小的全屏背景轮播动画 <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...

随机推荐

  1. arcmap+vs2010

    esri为vs2010提供了addin开发模版,有几个关键的地方注意下 1.C:\Program Files (x86)\MSBuild\Esri\下存在ESRI.ArcGIS.AddIns.Serv ...

  2. android ipc通信机制之二序列化接口和Binder

    IPC的一些基本概念,Serializable接口,Parcelable接口,以及Binder.此核心为最后的IBookManager.java类!!! Serializable接口,Parcelab ...

  3. BZOJ 1043 HAOI2008 下落的圆盘 计算几何

    题目大意:n个圆盘依次下落.求终于能看到的轮廓线面积 円盘反对! 让我们一起团结起来! 赶走円盘! 咳咳.非常神的一道题 今天去看了题解和白书才搞出来-- 首先我们倒着做 对于每一个圆盘处理出在它之后 ...

  4. 【转】Delphi调用webservice总结

    原文:http://www.cnblogs.com/zhangzhifeng/archive/2013/08/15/3259084.html Delphi调用C#写的webservice 用delph ...

  5. 解决IE下jquery ajax无法获得最新数据的问题（IE缓存）

    今天修改一个bug,利用ajax查询数据,在谷歌浏览器下可以获取到最新数据,而在IE中获得是旧数据,无法获得最新的数据,经查资料,才发现时IE缓存再作怪. 发现此ajax请求用的get方式,每次请求的 ...

  6. Office 365 Certificate Exam Resources

    70-321 Deploying Office 365 Deploying Office 365 Jump Start (01): Infrastructure Planning Deploying ...

  7. 日志分析(二) logstash patterns

    grok-patterns内置了很多基础变量的正则表达式的log解析规则,其中包括apache的log解析(同样可以用于nginx的log解析).   基于nginx日志分析配置: 1.配置nginx ...

  8. 用Linux安装光盘修复GRUB

    转载:http://lgn21st.iteye.com/blog/179455 需要开视频会议,我不得零时从Ubuntu切换回去百年难道用一次的WinXP...发现自己的XP系统很混乱...决定重新装 ...

  9. android 几个小技巧

    1.如果打开模拟器,不同程序打开了不同的模拟器.可能是某个某个模拟器的target版本过低,修改一下4.2,应该都可以用了 2.找不到R.id.的错误,不妨删除menu文件夹下的xml文件 3.act ...

  10. 炼数成金hadoop视频干货04

    视频地址:http://pan.baidu.com/s/1dDEgKwD 这一节讲的全是理论 任务执行优化 : 1.推测式执行: 2.重用JVM: 3.忽略模式. 除了手动修改Log4J.proper ...