在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. Qt + CURL + mimetic 发送邮件（带附件）

    使用了大名鼎鼎的CURL 开源库,以及mimetic开源库. CURL支持N多协议.功能超强,但是不能直接发邮件附件,需要自己拼mime.太麻烦,于是乎~~ mimetic主要用于构造邮件mimeti ...

  2. 如何将std::string转int,double? (C/C++) (C) (template)

    http://www.cnblogs.com/oomusou/archive/2008/08/01/525647.html http://blog.sina.com.cn/s/blog_a843a88 ...

  3. java实现简单的素数判断

    素数的这个问题由来已久,大学刚接触语言的时候遇到过找素数的问题,找工作笔试的时候也遇到过素数的问题,今天就特地写这篇博文,缅怀一下. 一.什么是素数? 除了1和它本身以外不再有其他的除数整除. 二.判 ...

  4. npm package 装包匹配原则

    经常看到package.json 里面有这样的devDependencies: "devDependencies": { "@angular/common": ...

  5. JavaScript DOM对象和JQuery对象相互转换

    1.分析源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  6. 又来折腾Linux

    硬盘坏了之后就没装过Linux了,因为弄了一个很老的台式机的80G并口硬盘,根本不够用的,一直懒得理. 前段时间实验室的老机子得报销了,但是里面的东西还可以拆下来,所以又拆下了两个硬盘,这样就有三个8 ...

  7. C++ 预编译头文件

    1.解决什么问题? C++ 编译器是单独,分别编译的,每个cpp文件,进行预编译(也就是对#include,define 等进行文本替换),生成编译单元.编译单元是一个自包含文件,C++编译器对编译单 ...

  8. 【转】Dijkstra算法（单源最短路径）

    原文:http://www.cnblogs.com/dolphin0520/archive/2011/08/26/2155202.html 单源最短路径问题,即在图中求出给定顶点到其它任一顶点的最短路 ...

  9. delphi 自动滚动到最底端scroll

    自动滚动到最底端scrollUses MSHTML;{$R *.dfm}var  ScrollPos: integer=0;procedure TForm1.Button1Click(Sender: ...

  10. day06 Java面向对象

    1.对象内存图 (1)1个对象的内存图:一个对象的基本初始化过程 (2)2个对象的内存图:方法的共用 (3)3个对象的内存图:其中有两个引用指向同一个对象