CSS实现自适应不同大小屏幕的背景大图的两种方法

一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动。

用CSS实现真的很简单很简单,下面我们来看一下第一种方法具体的代码:

HTML代码:

 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>title</title>
</head>
<body>
<div class="wrapper">
<!--背景图片-->
<div id="web_bg" style="background-image: url(./img/bg.jpg);"></div>
<!--其他代码 ... -->
</div>
</body>
</html>

CSS代码:

 #web_bg{
position:fixed;
top:;
left:;
width:100%;
height:100%;
min-width: 1000px;
z-index:-10;
zoom:;
background-color: #fff;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center 0;
}

你看,代码就是这么简单。
下面,我们来分析一下,css中每句代码的作用是什么:

 position:fixed;
top: 0;
left: 0;

这三句是让整个div固定在屏幕的最上方和最左方

   width:100%;
height:100%;
min-width: 1000px;

上面前两句是让整个div跟屏幕实现一模一样的大小,从而达到全屏效果,而min-width是为了实现让屏幕宽度在1000px以内时,div的大小保持不变,也就是说在这种情况下,缩放屏幕宽度时,图片不要缩放(只有在1000px以内才有效)。

   z-index:-10;

这个的目的是让整个div在HTML页面中各个层级的下方,正常情况下,第一个创建的层级z-index的值是0,所以如果我们这里写成-1也可以实现,不过这里写-10是确保整个div在最下面,因为如果页面中层级太多了,有的时候用-1不一定在最下面,但如果写成-100这样大数字的也没有什么意义。用index:-10 以此能达到看上去像背景图片,其实是一个最普通的div,只是层级关系变了,才让人看上去看是背景图片。

 zoom: 1;

这个的目的是为了兼容IE浏览器

 background-repeat: no-repeat;

上面这个是背景不要重复

  background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;

上面三句是一个意思,就是让图片随屏幕大小同步缩放,但是有部分可能会被裁切,不过不至于会露白,下面两句是为chrome和opera浏览器作兼容。

   background-position: center 0;

上面这句的意思就是图片的位置,居中,靠左对齐

第二种方法的代码

HTML代码如下:

 <div class="about-me">
![](./images/about-me.jpg)
<a href="http://iheima.com" class="introduction">
<h3>About me</h3>
</a>
</div>

css代码如下:

 .about-me {
position: relative;
min-width: 1480px;
width: 100%;
height: 520px;
overflow: hidden;
img.me {
position: absolute;
bottom:;
left:;
width: 100%;
height: auto;
min-height: 520px;
z-index:;
}
.introduction {
display: block;
position: absolute;
left:;
bottom:;
right:;
top:;
width: 100%;
height: 100%;
color: #fff;
background: rgba(0, 0, 0, .6);
z-index:;
cursor: pointer;
h3 {
margin: 100px auto 140px;
width: 170px;
height: 90px;
line-height: 90px;
font-size: 36px;
border-bottom: 2px solid #0b6d99;
}
}
}

CSS实现自适应不同大小屏幕的背景大图的两种方法(转自简书)的更多相关文章

  1. CSS实现自适应不同大小屏幕的背景大图

    在网上搜了好多demo:可总有这样那样的一些小瑕疵,试过几次后发现这样效果是最好的 html: <div class='bg'> <img src="image/bk02. ...

  2. 设置div背景透明的两种方法

    实现div背景透明的两种方法 1.使用opacity属性 background-color:#000; opacity: 0.5; 这样做可以设置div内部所以区域的透明度,但是也会影响里面的文字,效 ...

  3. CSS多行文字垂直居中的两种方法

    之前写过一篇关于:CSS左右居中对齐的文章,里面提到的两种方法其实也可以引申为垂直居中对齐.写这篇文章是因为要兼容IE6.IE7的问题,我们都知道一行文字时可以通过line-height来设置垂直居中 ...

  4. DISCUZ论坛添加页头及页尾背景图片的几种方法

    先给大家分享页头添加背景图片的两种方法:1. 第一种效果,是给discuz的整体框架添加背景图片,见图示: 添加方法如下:找到你现在使用模板common文件下的header.html文件,在<h ...

  5. CSS实现背景图尺寸不随浏览器大小而变化的两种方法

    一些网站的首页背景图尺寸不随浏览器缩放而变化,本例使用CSS 实现背景图尺寸不随浏览器缩放而变化,方法一. 把图片作为background,方法二使用img标签.喜欢的朋友可以看看   一些网站的首页 ...

  6. css实现div两列布局——左侧宽度固定,右侧宽度自适应(两种方法)

    原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...

  7. html中如何实现表格移入移出时背景颜色改变?(两种方法)

    html中如何实现表格移入移出时背景颜色改变?(两种方法) 一.总结 1.通过css的table标签的hover属性: 10 #tab:hover{ 11 background: green 12 } ...

  8. css:图标与文字对齐的两种方法

    (好久没写博客了,这几个月的积累比较零碎,记在本子上,现在开始整理归类) 在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向 ...

  9. css划隔横线的两种方法

    css划隔横线的两种方法  方法一:用DIV,代码如下:(推荐此方法)    <div style="width:800px;height:1px;margin:0px auto;pa ...

随机推荐

  1. 学JAVA第二十三天,List类型和Set类型

    数组,是我们最常用的,但是有时候,我们要用数组,但是又不知道数组的类的长度的时候, 我们java就有一个很好用的工具Collection,这都是java的爸爸的用心良苦,Collection中包含Li ...

  2. AJPFX关于通过索引获取最大值的思路

    /*** 通过索引获取最大值***/public class Test1 {        public static void main(String[] args) {              ...

  3. shutil模块 + shelve模块 二合一版

    其他的看我前面的博客 import shutil # 将文件内容拷贝到另一个文件with open('old.xml','r') as read_f,open('new.xml', 'w') as w ...

  4. kalman滤波器公式的推导

    卡尔曼滤波的使用范围: 该系统要有如下关系: 计算步骤: PART0:INI PART1:Time update 迭代的目标:从X(K-1)+ 求得X(K) + 因此,先有X(K-1)+,已知F,G. ...

  5. JS中的对象之原型

    对象 ECMAScript做为一个高度抽象的面向对象语言,是通过_对象_来交互的.即使ECMAScript里边也有_基本类型_,但是,当需要的时候,它们也会被转换成对象. 一个对象就是一个属性集合,并 ...

  6. R Programming week1-Reading Data

    Reading Data There are a few principal functions reading data into R. read.table, read.csv, for read ...

  7. java规范与标准?

    所谓规范,即指由很多人同时遵守的行为或理论. java的规范并不是指其中一种,而是有很多种,比如java编码规范,java命名规范,java虚拟机规范等等,甚至于一个编码规范都有很多种,不同的公司.组 ...

  8. 迅为IMX6UL工业级商业扩展级核心板兼容同一底板

    商业级IMX6UL核心板: ARM Cortex-A7架构 主频高达528 MHz 核心板512M DDR内存 8G EMMC 存储 运行温度:-20℃ ~ +80℃ CPU集成电源管理 核心板尺寸仅 ...

  9. Android嵌入式安卓触摸屏|4418开发板平台

    核心板参数 尺寸:50mm*60mm 高度:核心板连接器为1.5mm 4418 CPU:ARM Cortex-A9 四核 S5P4418处理器 1.4GHz 6818 CPU:ARM Cortex-A ...

  10. nutwk的maven中央仓库及配置

    官方maven服务器:https://jfrog.nutz.cn/artifactory/jcenter/ 如果用阿里的maven服务器,特别提醒: