在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. Jquery EasyUi实战教程布局篇

    转自:http://www.kwstu.com/ArticleView/kwstu_20139413501290 送给大家一个非常好的后台布局模板,本人后来就选择了这个模板http://www.kws ...

  2. Weblogic安装

    1.下载wls_121200.jar, 2.输入cnd打开命令提示 3.f:进入F盘 4.Java -version 验证是否配置Java环境, 5.echo %path% 查看环境变量 6.set ...

  3. 项目经验之:MVVM初学者图形化笔记整理。。。

    这个模式,一下子把我的思路给打开..让我眼前一亮..居然可以这样将界面分离得如此彻底........... 大家一起学习... 说说我的感受吧,一个小实例讲述了 MVVM实现原理: 一个简单的例,将两 ...

  4. SASS优化响应式断点管理

    前端开发whqet,csdn,王海庆,whqet,前端开发专家 原文:<Managing Responsive Breakpoints with Sass> 作者:Hugo Giraude ...

  5. HDU 4123 Bob’s Race 树的直径 RMQ

    Bob’s Race Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=41 ...

  6. delphi 05 图片和超链接

    超链接 /取消超链接 插入/取消 书签 插入图片 粘贴图上CTRL+v 截图 插入表情GIF WEB背景色 WEB背景图片      WebBrowser1.OleObject.document.ge ...

  7. Java 中队列的使用

    刚才看见群里的一个朋友在问队列的使用,确实在现实的写代码中非常少使用队列的,反正我是从来没使用过.仅仅是学数据结构的时候学过. 以下是我写的一个小样例,希望有不足之处请提出改正.O(∩_∩)O~ 看代 ...

  8. iOS开发——总结篇&常用开发总结

    一.通知1.监听通知 - (void)addObserver:(id)observer selector:(SEL)aSelector name:(NSString *)aName object:(i ...

  9. LeetCode: Reverse Words in a String：Evaluate Reverse Polish Notation

    LeetCode: Reverse Words in a String:Evaluate Reverse Polish Notation Evaluate the value of an arithm ...

  10. 申请TexturePacker 或 PhysicsEditor free licenses

    有一个跟开发有关的blog,就可以去 http://www.codeandweb.com/request-free-license 申请一个free licenses. 可以申请TexturePack ...