CSS实现背景图尺寸不随浏览器大小而变化的两种方法
一些网站的首页背景图尺寸不随浏览器缩放而变化,例如百度个人版的首页,缩放后背景图的尺寸并不改变:
再比如花瓣网( huaban.com ):
现在用CSS来实现这一效果。
首
先需要一张足够大尺寸的图片,上图百度背景图的尺寸为1600*1000px(
图片地址:http://4.su.bdimg.com/skin/12.jpg?2 );花瓣背景图的尺寸为1600*1600px(
图片地址:http://hbfile.b0.upaiyun.com/img/unauth_page/food_bg.jpg );
然后有两种方法可以达到背景图不缩放的效果:
方法一. 把图片作为background
有
几个CSS的属性要提一下:background-size:cover,这个CSS3的属性作用是把背景图像扩展至足够大,以使背景图像完全覆盖背景区
域,背景图像的某些部分也许无法显示在背景定位区域中,如果不使用这个属性,在IE11和FireFox中缩放浏览器,背景图片会随之缩小,同时使用
-webkit-background-size: cover和-o-background-size:
cover兼容webkit内核浏览器和Opera浏览器;background-attachment属性设置背景图像是否固定或者随着页面的其余部分
滚动,当设置为fixed时页面的其余部分滚动时,背景图像不会移动。
代码( 用了百度的星空图,效果和上面百度的截图一至 ):
HTML:
代码如下:
CSS:
代码如下:
#con{
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background-image:url("maskimg/star.jpg");
background-position: center 0;
background-repeat: no-repeat;
background-attachment:fixed;
background-size: cover;
-webkit-background-size: cover;/* 兼容Webkit内核浏览器如Chrome和Safari */
-o-background-size: cover;/* 兼容Opera */
zoom: 1;
}
方法二.不把图片作为背景,而是使用<img>标签,效果是图片尺寸不会随浏览器缩放而变化,但是如果有竖直滚动条时,图片不会固定而会随滚动条移动。只需要把图片的宽度width设置成100%就行了。
代码很简单,只有几行,用的还是百度的星空图:
HTML:
代码如下:
CSS:
代码如下:
body{ margin:0; padding:0;}
#pic{ width:100%;}
CSS实现背景图尺寸不随浏览器大小而变化的两种方法的更多相关文章
- CSS 实现背景图尺寸不随浏览器缩放而变化
<!-- Author:博客园小dee --> 一些网站的首页背景图尺寸不随浏览器缩放而变化,例如百度个人版的首页,缩放后背景图的尺寸并不改变: 再比如花瓣网( http://www.hu ...
- CSS实现背景图尺寸不随浏览器缩放而变化
方法一. 把图片作为background,方法二使用img标签.同时要有一张足够大尺寸的图片. 方法一. 把图片作为background 有几个CSS的属性要提一下:background-size:c ...
- CSS实现自适应不同大小屏幕的背景大图的两种方法(转自简书)
CSS实现自适应不同大小屏幕的背景大图的两种方法 一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块 ...
- CSS控制图片和文字在同一行显示且对齐的3种方法
CSS控制图片和文字在同一行显示且对齐的3种方法 在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见方法 ...
- css实现div两列布局——左侧宽度固定,右侧宽度自适应(两种方法)
原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...
- html中如何实现表格移入移出时背景颜色改变?(两种方法)
html中如何实现表格移入移出时背景颜色改变?(两种方法) 一.总结 1.通过css的table标签的hover属性: 10 #tab:hover{ 11 background: green 12 } ...
- css:图标与文字对齐的两种方法
(好久没写博客了,这几个月的积累比较零碎,记在本子上,现在开始整理归类) 在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向 ...
- css划隔横线的两种方法
css划隔横线的两种方法 方法一:用DIV,代码如下:(推荐此方法) <div style="width:800px;height:1px;margin:0px auto;pa ...
- CSS多行文字垂直居中的两种方法
之前写过一篇关于:CSS左右居中对齐的文章,里面提到的两种方法其实也可以引申为垂直居中对齐.写这篇文章是因为要兼容IE6.IE7的问题,我们都知道一行文字时可以通过line-height来设置垂直居中 ...
随机推荐
- BZOJ 1489: [HNOI2009]双递增序( dp )
dp(i, j)表示选第i个, 且当前序列长度为j, 另一个序列的最后一个元素的最小值...然后根据上一个是哪个序列选的讨论一下就行了...奇怪的dp... --------------------- ...
- Java学习之finally
如果catch中有return语句,finally里面的语句还会执行吗? 会执行,在return语句的中间执行 public class Test{ public static void main(S ...
- bzoj 1196: [HNOI2006]公路修建问题 二分+并查集
题目链接 1196: [HNOI2006]公路修建问题 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 1576 Solved: 909[Submit ...
- gdal 1.9+python 2.7开发环境配置
最近项目使用Cesium平台基于WegGl做web地球,其中关于地形数据有一种支持格式为terrain的地形数据.这种格式可以通过一个python工具切dem来得到. 下面记录下配置gdal+pyth ...
- 怪兽z主机豪华版 答问。
我的淘宝店里,怪兽z主机标准版,分经济版本,标准版,豪华版,三个版本.这里给大家详细介绍一下豪华版的概况. 淘宝购买地址:http://item.taobao.com/item.htm?id=3818 ...
- 通往WinDbg的捷径
通往WinDbg的捷径(一) 原文:http://www.debuginfo.com/articles/easywindbg.html译者:arhat时间:2006年4月13日关键词:CDB WinD ...
- (C#)Windows Shell 外壳编程系列6 - 执行
原文(C#)Windows Shell 外壳编程系列6 - 执行 (本系列文章由柠檬的(lc_mtt)原创,转载请注明出处,谢谢-) 接上一节:(C#)Windows Shell 外壳编程系列5 - ...
- swjtu 1962 A+B(模拟)
题目链接:http://acm.swjtu.edu.cn/JudgeOnline/showproblem?problem_id=1962 问题思路:考察编程基础的问题,涉及到字符串转为数字的问题. 代 ...
- JS动态增加页面上的控件实例
<input type="button" value="继续添加" onclick="append();"/ > & ...
- In Action(最短路+01背包)
In Action Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total S ...