在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. 自己学会汉化DevExpress控件[转]

    1. 文档导读 本文档以颜色区分内容的重要性和不同性,阅读本文档时请注意以下事项: 1. 红色部分表示需要注意的重点内容:(加粗的尤甚) 2. 蓝色部分表示相应于前版本新增的内容: 3. 紫色部分表示 ...

  2. 图片中的Exif信息 的ExifDirectory的大部份常量

    #define FMT_BYTE        1           //Format Byte ////////////////////////////////////////////////// ...

  3. PostgreSQL的 initdb 源代码分析之二十四

    继续分析: make_template0(); 展开: 无需再作解释,就是创建template0数据库 /* * copy template1 to template0 */ static void ...

  4. JQuery的Ajax使用Get,Post方法调用C#WebService并返回数据

    本文将介绍jQuery调用基于.NET Framework 3.5的WebService返回JSON数据,另外还要介绍一下用jQuery调用WebService的参数设置及设置不当所出现的问题,还有出 ...

  5. C#开发的WebService使用JSON格式传递数据+Ajax测试

    [C#]  WebService 使用 JSON 格式傳遞筆記 + JQuery 測試 0 2 因為一些因素,必須改寫WebService,很傳統,但是很多公司還在用.. 因為XML 的關係,不想讓他 ...

  6. Wps的ppt里 让图片按顺序出现 就是点击一下 出现一张照片

    基本操作能够用两种方法来实现: 方法一.每页幻灯片插入一张图片,幻灯片默认就是单击鼠标切换幻灯片的,所以不用再做其它设置. 方法二.在一页幻灯片中插入多张图片,全选图片(插入图片后,点击图片,Ctrl ...

  7. 解决Android上的QPython不能import urllib的问题

    试用了一下QPython,感觉很强大,Kivy也包含进去了,下载一些第三方库也很方便,相对于SL4A来说确实先进了很多. 但是很快发现不能import urllib,提示大概是这样的内容: No mo ...

  8. Ubuntu开机时出现&quot;没有正确安装GNOME电源管理器的默认配置

    1:在登录界面.按Ctrl+Alt+F1,进入控制台命令行模式 2:先输入username,回车,然后输入password,登录成功 3:输入df -h,这个命令是查看硬盘空间的.能够看一下.你的ho ...

  9. [Effective C++ --029]为“异常安全”而努力是值得的

    假设有个class用来表现夹带背景图案的GUI菜单单,这个class用于多线程环境,所以它有个互斥器(mutex)作为并发控制用: class PrettyMenu{ public: ... void ...

  10. JS 操作 radio input（cc问卷管理）

    1.选中特定的单选按钮 function showDetail(content){ $("input[name^='radio']").removeAttr("check ...