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

在写主题样式的时候经常会碰到用背景图铺满整个背景的需求,这里分享下使用方法

需要的效果

  1. 图片以背景的形式铺满整个屏幕,不留空白区域
  2. 保持图像的纵横比(图片不变形)
  3. 图片居中
  4. 不出现滚动条
  5. 多浏览器支持

以图片bg.jpg为例

最简单,最高效的方法 CSS3.0

归功于css3.0新增的一个属性background-size,可以简单的实现这个效果,这里用fixed和center定位背景图,然后用background-size来使图片铺满,具体css如下

  1. -webkit-background-size: cover;
  2. -moz-background-size: cover;
  3. -o-background-size: cover;
  4. background-size: cover;

适用于以下浏览器

  • Safari 3+
  • Chrome
  • IE 9+
  • Opera 10+ (Opera 9.5 支持background-size属性 但是不支持cover)
  • Firefox 3.6+

低版本浏览器不支持 。

原文地址:https://www.cnblogs.com/jayjay798/p/11659851.html

时间: 2024-09-30 09:19:04

css设置全屏背景图,background-size 属性的相关文章

CSS之全屏背景图

吐槽啦:Yeah  明天就是国庆了!哈哈,提前祝福各位园友国庆快乐.假期愉快.生活美满.天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~ 言归正传,我们回到我们的主题来看看CSS之全屏背景图.Nowdays,满屏大图的网页成为了一种fashion,网页的模板.布局是用CSS.HTML……来设计的,这里就以CSS来聊全拼背景图. 简单点,对于全屏背景图,我们只需用CSS的一个background-size属性就可以了. 当background-size的值

CSS实现响应式全屏背景图

body { /* 加载背景图 */ background-image: url(images/background-photo.jpg); /* 背景图垂直.水平均居中 */ background-position: center center; /* 背景图不平铺 */ background-repeat: no-repeat; /* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */ background-attachment: fixed; /* 让背景图基于容器大

html全屏背景图css写法

<div id="web_bg" style="position:absolute; width:100%; height:100%; z-index:-1"> <img style="position:fixed;" src="www.xxxx.com/images/5.jpg" height="100%" width="100%" /> </div>

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

基于HTML5和CSS的焦点图特效,梅花图案的背景很有中国特色,而且还会动哦,效果超炫,推荐下载! 演示图 html代码 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/199

unity中全屏背景图缩放

1 using UnityEngine; 2 using System.Collections; 3 4 public class BgPicScript : MonoBehaviour { 5 6 // Use this for initialization 7 public UITexture bg; 8 void Start () { 9 10 Debug.Log("device宽高: " + Screen.width + "_" + Screen.heigh

Android开发中的全屏背景显示方案

引子 不管是Android还是iOS平台中,都可以看到一些应用在启动的时候会先出现一个启动画面(Splash Activity),如QQ.微信等.这个启动画面中往往会将ActionBar和Status Bar隐藏掉,然后用户进入一种沉浸的状态,形成更强烈的视觉冲击.一方面,这可以给用户留下更深刻的使用体验,从而产生一定品牌效应:另一方面,也给应用的启动初始化留下了充裕的时间,避免因为启动时间过长而给用户留下不良的印象.因此,全屏显示在手机应用中得到了广泛的应用.那么这篇博客中就记录下全屏显示的一

background 设置文本框背景图

background 属性的作用是给元素设置背景,它是一个复合属性,常用的子属性如下: background-color 指定元素的背景颜色. background-image 指定元素的背景图像. background-position 指定背景图像的位置,在复合属性中与 size 二选一. background-size 指定背景图片的尺寸,在复合属性中与 position 二选一. background-repeat 指定如何重复背景图像. 多数时候,我们都是给 div 等区块元素设置背景

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

译文原链接:http://codetheory.in/html5-fullscreen-background-video/ 前言: 当网页载入时,自动播放的全屏背景视频已经成为当前颇受欢迎的趋势. 就个人而言,我认为自动播放.质量好的视频会增加用户/客户的参与度.应该记住,视频的故事必须与品牌相关. 近年来,我们被FB和Twitter等社交网络上的大量视频所包围. 据研究由此引起了用户更多的参与. 最近我不得不在一个网站上实现相同的功能,因此我决定构建一个用到 HTML5 视频元素并且易于使用的

非常精美的jQuery背景动画全屏焦点图(附源码)

1.  jquery背景动画个性全屏焦点图 源码下载  /  在线演示 2. 圣诞快乐礼盒破裂HTML5特效 源码下载 /  在线演示 3. JS+CSS3实现时间日期特效 源码下载/   在线演示 非常精美的jQuery背景动画全屏焦点图(附源码)