前端  验证一下  不同div加载同一图片 呈现不同效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>显示我们的变化</title>
	<link rel="stylesheet" type="text/css" href="index.css"> 
	<style>
	.div2{
		width:250px;
		height:250px;
		background: url("69.gif") -250px -250px; 
	}
		//69.gif   500*500 
		//  [红][白]
		//  [白][蓝]
	</style
</head>
<body>
	 <div  style="background:url(69.gif); height:250px; width:250px;">
		 加载红色区域
		 <br>
		 <br>
		 <br>
		 </div>
		  <hr>
		  <div class="div2" >
		  加载蓝色区域
		 <br>
		 <br>
		 <br>
		 </div>
		 <hr>
  
</body>

</html>

验证结果  px与文件一致   同windos 左上角为原点
时间: 2024-08-09 10:34:39

前端  验证一下  不同div加载同一图片 呈现不同效果的相关文章

【前端开发】提高网站加载速度

尊重原创:但是出处不明...... YSlow是yahoo美国开发的一个页面评分插件,非常的棒,从中我们可以看出我们页面上的很多不足,并且可以知道我们改怎么却改进和优化. 仔细研究了下YSlow跌评分规则主要有12条: 1. Make fewer HTTP requests 尽可能少的http请求..我们有141个请求(其中15个JS请求,3个CSS请求,47个CSS background images请求),多的可怕.思考了下,为什么把这个三种请求过多列为对页面加载的重要不利因素呢,而过多的I

图片预加载与图片懒加载的区别与实现

预加载与懒加载,我们经常经常用到,这些技术不仅仅限于图片加载,我们今天讨论的是图片加载: 一.什么是图片预加载与懒加载: 图片预加载:顾名思义,图片预加载就是在网页全部加载之前,提前加载图片.当用户需要查看时可直接从本地缓存中渲染,以提供给用户更好的体验,减少等待的时间.否则,如果一个页面的内容过于庞大,没有使用预加载技术的页面就会长时间的展现为一片空白,这样浏览者可能以为图片预览慢而没兴趣浏览,把网页关掉,这时,就需要图片预加载.当然这种做法实际上牺牲了服务器的性能换取了更好的用户体验. 图

WebView加载HTML图片大小自适应与文章自动换行

http://www.brighttj.com/ios/ios-webview-load-html-image-adaptive.html 在很多App中都会使用到webview,尤其是在加载新闻内容等文章形式的数据时.因为图文混编以及不同字体格式的显示,在iOS进行编辑和显示都是一大问题(当然,iOS中也可以用CoreText进行绘制),但是对于web端来说,一个富文本编辑器就可以完美解决这个问题.所以后台很多时候会直接返回HTML代码拿给前端解析,这时,在客户端对HTML代码的处理就显得尤为

页面第一次加载实现图片淡入方式加载

页面第一次加载实现图片淡入方式加载:图片以淡入方式加载总是让人感觉有一种动态的感觉,可以让用户体验更好,下面就简单介绍一下如何实现此效果.当页面加载的时候,让加载好的图片先隐藏,然后再使用fadeIn()函数实现图片的淡入效果,参考代码如下: <script type="text/javascript"> $("#load img").load(function() { $(this).hide(); $(this).fadeIn("5000&

利用js加载本地图片预览功能

直接上代码: 经测试,除safari6包括6以下不支持,其他均可正常显示. 原因:safari6不支持filereader,同时不能使用IE滤镜导致失效. fix: 可以利用canvas,解决safari6的问题 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

安卓 WebView加载本地图片时居中显示

在一个项目中使用WebView显示gif图片(自定义的View无法放大gif),当图片过小时只在左侧显示,经过研究发现无论设置android:layout_gravity="center_horizontal"还是设置android:gravity="center_horizontal" 都无法居中显示,而且还设置了android:layout_width="wrap_content",但是实际上WebView并没有自适应内容,它的宽度占了屏幕宽

Cesium专栏-Billboard加载Gif图片

Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精度,渲染质量以及多平台,易用性上都有高质量的保证. 前段时间,在某些交流群里看到有朋友在问Billboard如何加载Gif图片,正好,Github上有一个类似的效果案例,但是无奈,案例的源码打包封装到Cesium里面了,而且Cesium的版本过于老旧,于是研究了一下,基于libgif-js做了一个Billboar

win32用GDI+加载png图片作为背景图

#include <windows.h> #include <gdiplus.h> /* GDI+ startup token */ ULONG_PTR gdiplusStartupToken; /* Declare Windows procedure */ LRESULT CALLBACK WindowProcedure (HWND, UINT, WPARAM, LPARAM); // UpdateLayeredWindow Defination typedef BOOL(*UP

有效解决Android加载大图片时内存溢出的问题

首先解析一下基本的知识: 位图模式,bitmap颜色位数是1位 灰度模式,bitmap颜色位数是8位,和256色一样 RGB模式,bitmap颜色位数是24位 在RGB模式下,一个像素对应的是红.绿.蓝三个字节 CMYK模式,bitmap颜色位数是32位  在CMYK模式下,一个像素对应的是青.品.黄.黑四个字节 图像文件的字节数(Byte) = 图像分辨率*颜色深度/8(bit/8) 例如:一幅640*480图像分辨率.RGB色一般为24位真彩色,图像未经压缩的数据容量为:640X480X24

[android] 加载大图片到内存

默认情况下,android程序分配的堆内存大小是16,虚拟机上面的VM Heep就是设置它的 一个图片所占的内存,比如1920*2560像素的图片需要,1920*2560*3至少这些的内存byte 找到ImageView控件对象 调用BitmapFactory对象的decodeFile(pathName)方法,来获取一个位图对象,参数:pathName是String类型的图片路径 把图片导入到手机的sdcard目录下面 调用ImageView对象的setImageBitmap(bitemap)方