两种方法可以达到背景图不缩放的效果

方法一. 把图片作为background

有几个CSS的属性要提一下:background-size:cover,这个CSS3的属性作用是把背景图像扩展至足够大,以使背景图像完全覆盖背景区域,背景图像的某些部分也许无法显示在背景定位区域中,如果不使用这个属性,在IE11和FireFox中缩放浏览器,背景图片会随之缩小,同时使用-webkit-background-size: cover和-o-background-size: cover兼容webkit内核浏览器和Opera浏览器;background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动,当设置为fixed时页面的其余部分滚动时,背景图像不会移动。

HTML:

代码如下:

<div id="con"></div>

CSS:

代码如下:

body{ margin:0; padding:0;} 
#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:

代码如下:

<div id="con"><img id="pic" src="maskimg/star.jpg"></div> _fcksavedurl=""maskimg/star.jpg"></div>"

CSS:

代码如下:

body{ margin:0; padding:0;} 
#pic{ width:100%;}

时间: 2024-10-10 16:37:21

两种方法可以达到背景图不缩放的效果的相关文章

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

一些网站的首页背景图尺寸不随浏览器缩放而变化,本例使用CSS 实现背景图尺寸不随浏览器缩放而变化,方法一. 把图片作为background,方法二使用img标签.喜欢的朋友可以看看 一些网站的首页背景图尺寸不随浏览器缩放而变化,例如百度个人版的首页,缩放后背景图的尺寸并不改变:  再比如花瓣网( huaban.com ): 现在用CSS来实现这一效果. 首 先需要一张足够大尺寸的图片,上图百度背景图的尺寸为1600*1000px( 图片地址:http://4.su.bdimg.com/skin/

基于邻接矩阵和邻接表的两种方法实现无向图的BFS和DFS

广度优先搜索(Breadth-First-Search)和深度优先搜索(Deep-First-Search)是搜索策略中最经常用到的两种方法,特别常用于图的搜索. BFS的思想: 从一个图的某一个顶点V0出发,首先访问和V0相邻的且未被访问过的顶点V1.V2.--Vn,然后依次访问与V1.V2--Vn相邻且未被访问的顶点.如此继续,找到所要找的顶点或者遍历完整个图.我们采用队列来存储访问过的节点. DFS的思想: 深度优先搜索所遵循的策略就是尽可能"深"的在图中进行搜索,对于图中某一个

有向无环图(DAG)拓扑排序的两种方法

如下图的DAG: 第一种: (1)从AOV网中选择一个没有前驱的顶点并且输出它: (2)从AOV网中删除该顶点,并且上去所有该顶点为尾的弧: (3)重复上述两步,直到全部顶点都被输出,或者AOV网中不存在没有前驱的顶点. 第二种: 使用深度优先搜索(DFS),并标记每一个节点的第一次访问(pre)和最后一次访问时间(post),最后post的逆序就是DAG的拓扑排序,其实也是节点在进行DFS搜索时,出栈的逆序就是拓扑排序. 拓扑序列的结果有: (1) c++,高等数学,离散数学,数据结构,概率论

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

CSS实现自适应不同大小屏幕的背景大图的两种方法 一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 用CSS实现真的很简单很简单,下面我们来看一下第一种方法具体的代码: HTML代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <m

Qt 之 设置窗口边框的圆角(使用QSS和PaintEvent两种方法)

Qt在设置窗口边框圆角时有两种方式,一种是设置样式,另一种是在paintEvent事件中绘制窗口.下面分别叙述用这两种方式来实现窗口边框圆角的效果. 一.使用setStyleSheet方法 this->setStyleSheet(“QWidget{border-top-left-radius:15px;border-top-right-radius:5px;}”)); 使用的主要是使用border-radius 属性,关于这个属性,可选的样式有 border-top-left-radius 设置

pdf文件怎么修改 修改PDF文件的两种方法

都说PDF格式的文件不能修改,我就呵呵了!不管你们信不信,反正我是不信.因为我会修改PDF文件,并且方法还不止一种.想知道我是怎么修改PDF文件的吗?下面我就告诉大家修改PDF文件的两种方法. 方法一 1.方法一就是将PDF文件转换成一种可容易编辑的文档,如:word.excel.ppt等格式,然后再进行编辑,编辑好后再将其转换成PDF格式,是不是很简单!具体是该如何转换的,下面有详细教程. 2.下载一个PDF转换器,并将它安装在电脑上.工具最好是支持双向转换的那种,如:http://www.x

SQL Server 批量插入数据的两种方法

在SQL Server 中插入一条数据使用Insert语句,但是如果想要批量插入一堆数据的话,循环使用Insert不仅效率低,而且会导致SQL一系统性能问题.下面介绍SQL Server支持的两种批量数据插入方法:Bulk和表值参数(Table-Valued Parameters). 运行下面的脚本,建立测试数据库和表值参数. [c-sharp] view plaincopy --Create DataBase create database BulkTestDB; go use BulkTes

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

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

UIImage加载图片的两种方法区别

Apple官方的文档为生成一个UIImage对象提供了两种方法加载图片: 1. imageNamed,其参数为图片的名字: 2. imageWithContentsOfFile,其参数也是图片文件的路径. 那么两种有什么区别吗? 肯定是有的.根据Apple的官方文档: imageNamed: 这 个方法用一个指定的名字在系统缓存中查找并返回一个图片对象如果它存在的话.如果缓存中没有找到相应的图片,这个方法从指定的文档中加载然后缓存并返回这 个对象.因此imageNamed的优点是当加载时会缓存图