全屏css,CSS之全屏背景图

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

言归正传，我们回到我们的主题来看看CSS之全屏背景图。Nowdays，满屏大图的网页成为了一种fashion，网页的模板、布局是用CSS、HTML……来设计的，这里就以CSS来聊全屏背景图。

简单点，对于全屏背景图，我们只需用CSS的一个background-size属性就可以了。

当background-size的值为cover时，浏览器会自动按比例缩放背景图的宽和高，直到大于或等于viewport的宽和高。

Syntas语法：

body {

/* 加载背景图 */

background-image: url(http://images.cnblogs.com/cnblogs_com/caidupingblogs/828701/o_5_11911_8.jpg);

/* 背景图垂直、水平均居中 */

background-position: center center;

/* 背景图不平铺 */

background-repeat: no-repeat;

/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */

background-attachment: fixed;

/* 让背景图基于容器大小伸缩 */

background-size: cover;

/* 设置背景颜色，背景图加载过程中会显示背景色 */

background-color: #FF0000;

}

在这里需要注意的一点就是：如果背景图小于body标签的尺寸(例如在高分辨率显示器上，或页面内容特别多时)，浏览器会拉伸图片。我们都知道，当把一个图片拉伸时，图片会变模糊。

因此，在选择背景图时，要特别注意尺寸。

还有一个问题就是在其他媒体设备上查看，在不同的屏幕上查看是不一样的，所以我们要将max-width: 600px设为断点，也就是说当浏览器viewport大于600px时，会使用大背景图，反之使用小背景图。下面是媒体查询方法：

@media only screen and (max-width: 600px) {

body {

background-image: url(http://images.cnblogs.com/cnblogs_com/caidupingblogs/828701/o_5_11911_8.jpg);

}

}

我们设置background为fixed和center，再使用background-size来适应大小:

html {

background: url(images/bg.jpg) no-repeat center center fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

css设置全屏背景图，background-size 属性

在写主题样式的时候经常会碰到用背景图铺满整个背景的需求,这里分享下使用方法 需要的效果 图片以背景的形式铺满整个屏幕,不留空白区域 保持图像的纵横比(图片不变形) 图片居中 不出现滚动条 多浏览器支持 ...

CSS实现响应式全屏背景图

body { /* 加载背景图 */ background-image: url(images/background-photo.jpg); /* 背景图垂直.水平均居中 */ background- ...

全屏背景图的实现及background的相关属性

今天需要做一个占满设备宽度的轮播图,这里作为demo仅展示一张图,下面分别是要操作的图片(这里做了缩放处理,实际的图比较大),以及要实现的效果图,很明显两者是不成比例的:      (图一)     ...

一个酷炫的，基于HTML5,Jquery和Css的全屏焦点图特效，兼容各种浏览器

基于HTML5和CSS的焦点图特效,梅花图案的背景很有中国特色,而且还会动哦,效果超炫,推荐下载! 演示图 html代码 /p>

unity中全屏背景图缩放

using UnityEngine; using System.Collections; public class BgPicScript : MonoBehaviour { // Use this ...

css 设置全屏背景图片

div#div1{ position: ...

CSS之生成全屏背景图片

在CSS中背景图片的填充方法: background-position:x,y(背景图片x,y轴的定位) background-repeat:no-repeat(不平铺) background-rep ...

HTML5全屏背景视频与 CSS 和 JS(插件或库)

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

css3全屏背景图片切换特效

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

随机推荐

python获取命令行输出结果

#coding=utf-8 import os   command = 'ping www.baidu.com ' #可以直接在命令行中执行的命令 r = os.popen(command) #执行该 ...

jQuery对象与dom对象的转换

一直以来对于通过jQuery方式获取的对象使不能直接使用JavaScript的一些方法的,开始的时候不理解,现在此案知道,原来jQuery获得的对象并不和我们平时使用getElementById获得的 ...

media type和media query

media type media type是CSS2的重要属性,通过它,可以针对不同的设备指定不同的样式.   media type种类:   用法:

ReactNative系列组件用法(一)

首先我们来认识view 改变一些特性,再来看看项目的变化 我们新增flex布局的一些属性,再来看看项目的变化 接下来我们来看看如果获取屏幕的分辨率 关于图片的用法,reactNative这里也是很神奇 ...

Python数据分析入门之pandas基础总结

Pandas--"大熊猫"基础 Series Series: pandas的长枪(数据表中的一列或一行,观测向量,一维数组...) Series1 = pd.Series(np.r ...

dashboard and reporting Interface analysis

dashboard and reporting Interface analysis > show system show system backup show system counters ...