在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. MES生产日报存储过程

    USE [ScreenMonitor]GO/****** Object: StoredProcedure [dbo].[ImportProductForDay] Script Date: 04/11/ ...

  2. Autofac实例生命周期

    1.默认,每次请求都会返回一个实例 builder.RegisterType<X>().InstancePerDependency(); 2.Per Lifetime Scope:这个作用 ...

  3. UVa699 The Falling Leaves

      // UVa699 The Falling Leaves // 题意:给一棵二叉树,每个节点都有一个水平位置:左儿子在它左边1个单位,右儿子在右边1个单位.从左向右输出每个水平位置的所有结点的权值 ...

  4. 安装Loopback网卡/回环网卡

    $CurrentPath = $MyInvocation.MyCommand.Path.substring(0,$MyInvocation.MyCommand.Path.LastIndexOf('\' ...

  5. 破解中国电信华为无线猫路由（HG522-C）自己主动拨号+不限电脑数+iTV

    中国电信总是把好好的一个路由猫阉割过后放在我的E家套餐里到处兜售(垄断市场也就罢了,还有非常多霸王条款,比方必须使用它们的手机,同一时候最多多少台电脑上网等等),曾经破解过另外一个中国电信的路由猫,非 ...

  6. Chrome Apps将可以打包成iOS或Android应用

    Chrome Apps 将可以在 iOS 和 Android 设备上独立运行了.开发者只要使用 Google今天 提供的工具集(toolchain)将自己的 Web App 打包,并将生成的应用上传到 ...

  7. MyBatis之五：动态sql语句

    在mybatis 3 或以上的版本提供了4类标签,分别是:if,choose(when,otherwise),rim(where,set),foreach.接下来将分别介绍这几种标签的具体用法,映射x ...

  8. 使用C#开发纽曼USB来电小秘书客户端小结

    在前面用C#开发完CRM的来电弹屏之后,有些客户有了新的要求,他们希望不但能够实现来电弹屏,更希望能够将呼入呼出的电话录音并上传到CRM服务器上,方便日后跟踪记录.于是便有了来电小秘书客户端的开发.  ...

  9. Java中介者设计模式

    中介者设计模式是一种很常见的设计模式,当中我们最为熟悉的就是我们的MVC框架.当中的C作为控制器就是一个详细的中介者,它的作用是把业务逻辑(Model),和视图(Viwe)隔离开来.使M V协调工作, ...

  10. leetcode -- Search for a Range (TODO)

    Given a sorted array of integers, find the starting and ending position of a given target value. You ...