背景图片随浏览器大小改变的代码
base64：最好的URL背景图片与web页面性能优化2
base64：最好的URL背景图片与web页面性能优化文章整理：微电影（）一、base64百科Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一，可用于在HTTP环境下传递较长的标识信息。
某人：唉，我彻底废柴了，为何上面明明是中文，洒家却看不懂嘞，为什么？好吧，我也不喜欢专业术语的解释。
你只要知道，base64编码就是长得像下面这样子的代码：thunder://QUFodHRwOi8vd3d3LmJhaWR1LmNvbS9pbWcvc3NsbTFfbG9nby5naWZa Wg==上面代码大家都熟悉吧，迅雷下载链接哦（咳咳，该地址很纯洁），就是base64编码后的地址，所以以后看到这种：一堆连续字母，最后有1~2个“=”的代码就是base64。
base64:URL就是URL地址是base64编码的。
例如下面这个：<imgsrc="data:image/gif;base64,R0lGODlhAwADAIABAL6+vv///yH5BAEAAAEALAAAAAADAA MAAAIDjA9WADs=" />二、base64与文件数据编码在网络中，通过HTTP传输的文件还可以通过base64对数据进行编码进行传输。
就如上面的这个base64的gif格式图片。
当然，可以base64编码的文件不仅仅是图片，也可以是字体文件，例如（中间有缺省）：文章来源：成都夜场（）@font-face{font-family: forTest;src:url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAh4 ... RFERuENEGADl7JlY=) format('woff');}自然，对于background-image图片，我们也可以使用base64编码进行传输，例如：background-image:url(data:image/gif;base64,R0lGODlhBAABAIABAMLBwfLx8SH5BAE AAAEALAAAAAAEAAEAAAICRF4AOw==);而使用base64编码作为background-image图片就是本文要着重阐述的。
网页编辑常用代码
1)贴图：<img src="图片地址">2)加入连接：<a href="所要连接的相关地址">写上你想写的字</a>3)在新窗口打开连接：<a href="相关地址"target="_blank">写上要写的字< /a>4)移动字体(走马灯)：<marquee>写上你想写的字</marquee>（可用于店铺分类，和评价）5)字体加粗：<b>写上你想写的字</b>6)字体斜体：<i>写上你想写的字</i>7)字体下划线:<u>写上你想写的字</u>8)字体删除线:<s>写上你想写的字</s>9)字体加大:<big>写上你想写的字</big>10)字体控制大小：<h1>写上你想写的字</h1>(其中字体大小可从h1-h5,h1最大，h5最小)(其中字体大小可从h1-h5,h1最大，h5最小)11)更改字体颜色：<font color="#value">写上你想写的字</font>(其中value 值在000000与ffffff(16位进制)之间12)消除连接的下划线：<a href="相关地址"style="text-decoration:none">写上你想写的字</a>13)贴音乐：<embed src="音乐地址"width="宽度"height="高度"autostart=false>14)贴flash:<embed src="flash地址"width="宽度"height="高度">15)贴影视文件：<img dynsrc="文件地址"width="宽度"height="高度" start=mouseover>16)换行：<br>17)段落：<p>段落</p>18）原始文字样式：<pre>正文</pre>19)换帖子背景：<body background="背景图片地址">20)固定帖子背景不随滚动条滚动：<body background="背景图片地址"body bgproperties=fixed>21)定制帖子背景颜色：<body bgcolor="#value">(value值见10)22)帖子背景音乐：<bgsound="背景音乐地址"loop=infinite>（听到音乐了吗？也可以加在你的店铺公告里）23)贴网页：<iframe src="相关地址"width="宽度"height="高度"></iframe>24)店铺音乐代码:音乐网址"loop="-1">25)图片制作代码：<img src="这里放图片地址">26)公告图片代码：<img border="0"src="这里放图片地址"/>或<img src="这里放图片地址"/>27)悬浮挂饰代码：<img src="这里放图片地址"style="left:20px;position: relative;top:0px"/>28)商品分类代码:<img src="这里放图片地址"/>29)字体大小代码:<font size="2">这里放要处理的文字，可用3、4、5等设置大小</font>30)字体颜色代码:<font color="red">这里放要处理的文字，可以换成blue,yellow等</font>31)文字链接代码:<a href="网页地址">链接的文字，在分类栏里用时链接的网页地址必须缩短</a>32)移动文字代码:<marquee>从右到左移动的文字</marquee>33)背景音乐代码：<bgsound loop="-1"src="这里放音乐地址"></bgsound>34)图片附加音乐代码：<img border=0src="这里放图片地址"dynsrc="这里放音乐地址">35)浮动图片代码:<img alt="1"height="150"src="这里放图片地址"/>36)移动字体(走马灯)：<marquee>写上你想写的字</marquee>37)图片从下向上移动的代码：<marquee direction=up><img src=图片地址width="100"height="50"</img></marquee>38)图片从左向右移动的代码：<marquee direction=right><img src=图片地址width="100"height="50"</img></marquee>39)图片从右向左移动的代码：<marquee direction=left><img src=图片地址width="100"height="50"</img></marquee>40)[HR]直线41）[quote]引用[/quote]42）[code]框选[/code][quote][code]这种比较集中，内容居中43）[HIDE][/HIDE]隐藏44）表格大小：[table=50%]45）视频大小：[media=x,800,480]论坛大小：700淘宝大小：600网站一般：500一.如何贴图代码：<img src="/lady/0301/27/mei1.jpg">在"..."之间的东西就是图的地址（存放的地方），在网页中看到好看的图片就用鼠标的右键（不是左键）点图，出现个表单，点最下面的属性（用左键）这时就能看到图的路径了。
关于利用ASP使图片自动缩放以适合界面大小的实例代码分享
关于利用ASP使图片自动缩放以适合界面大小的实例代码分享本文将给大家分享学习的是关于利用ASP使图片自动缩放以适合界面大小的实例代码分享，希望能够给大家带来帮助或启发。
如何让图片自动缩放以适合界面大小，拿出你的Editplus，打开c_文件，找到UBBCode函数，在第417行有如下语句If Instr(strType,”[image]”)>0And ZC_UBB_IMAGE_ENABLE Then …[img]=“(\[IMG=)([0-9]*),([0-9]*),(.*)(\])(.+?)(\[\/IMG\])”strContent= (strContent,”“)=“(\[IMG=)([0-9]*),(.*)(\])(.+?)(\[\/IMG\])”strContent= (strContent,”“)=“(\[IMG\])(.+?)(\[\/IMG\])”strContent= (strContent,”“)End If在其中加上onload=…java script:if(>400)=400;‟,这里400是要让超过400的图片小于400,你可以自己设定宽度.下面是已经改好的If Instr(strType,”[image]”)>0And ZC_UBB_IMAGE_ENABLE Then …[img]=“(\[IMG=)([0-9]*),([0-9]*),(.*)(\])(.+?)(\[\/IMG\])”strContent= (strContent,”400)=400;‟ src=““$6”“ title=““$4”“ width=““$2”“ height=““$3”“/>“)=“(\[IMG=)([0-9]*),(.*)(\])(.+?)(\[\/IMG\])”strContent= (strContent,”400)=400;‟ src=““$5”“ title=““$3”“ width=““$2”“/>“)=“(\[IMG\])(.+?)(\[\/IMG\])”strContent= (strContent,”400)=400;‟ src=““$2”“ title=““““/>“)End If。
用css控制背景图片的位置,大小
background-position : length || length
background-position : position || position
background-position-x : length | left | center | right
background-position-y : length | top | center | bottom
说了这么多例子，我想你对于定位，有一定的了解了吧。
(5)、背景图片的透明设置：
有的时候，我们总想着去将图片设置成透明的。
(6)、多幅背景图片的设置：
对于多幅背景图片的设置，我是在《超越CSS：WEB设计艺术精髓》里看到的。不过，却又让我很遗憾，因为，目前支持一个标签内有多幅背景图片的浏览器太小了，我知道的也只有Apple Safari 。以许你会问，这怎么可能。当你看完这个实例之后，我想你会惊讶，“天啊，CSS3之前都只能给每个元素使用一幅图片。”如果想研究一下的话，就快快安装一个SAFARI浏览器吧。对我而言，我相信，这是发展的趋势。总之一句话，谁解释CSS能力越强，它就将是发展的潮流，谁俱有完美的WEB准标，谁就是明日浏览器之星。
body { background-image: url("d:\images\04.jpg"); background-position: 50% center; background-repeat:no-repeat; } /*设置双向坐标，这时相当于中下*/
body { background-image: url("d:\images\04.jpg"); background-position: 60px center; background-repeat:no-repeat; } /*设置双向坐标，这时相当于距左60像素下*/
微信小程序image图片自适应宽度比例显示的方法
微信⼩程序image图⽚⾃适应宽度⽐例显⽰的⽅法我们都知道微信⼩程序的组件image是⽤来显⽰图⽚的，它有⼀下⼏个属性：1、src 图⽚资源地址2、mode 图⽚裁剪、缩放的模式3、binderror 当错误发⽣时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: ‘something wrong’}4、bindload 当图⽚载⼊完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:’图⽚⾼度px’, width:’图⽚宽度px’}但是image有默认的固定的宽度和⾼度，这样我们在做图⽚⾃适应的时候，就不好做了，特别是我们在做⼀些商品详情页的时候，需要image⾃适应屏幕,按原图⽐例显⽰。
那么如何让image⾃适应⽐例显⽰呢？可以有两种⽅法：⼀、使⽤mode：widthFixwidthFix：宽度不变，⾼度⾃动变化，保持原图宽⾼⽐不变。
⾸先我们先设置image的mode为widthFix，然后给图⽚加⼀个固定rpx的宽度，⽐如：730rpx。
这样图⽚也可以⾃适应了。
因为⼩程序的rpx本⾝就是⼀个⾃适应显⽰的单位⼆、使⽤bindload绑定函数动态⾃适应。
我们可以给image绑定⼀个函数，这个函数，如上⾯的bindload说明⼀样，我们可以获取到原图的宽度和⾼度。
然后计算他们的宽⾼⽐率。
然后设置⼀个宽度⼤⼩（rpx），最后通过style动态设置image的宽⾼。
代码如下：html代码：<image src="{{ item }}" bindload="imageLoad" data-index="{{ index }}"style="width:{{ images[index].width }}rpx; height:{{ images[index].height }}rpx;"></image>js代码：Page({data: {images:{}},imageLoad: function(e) {var $width=e.detail.width, //获取图⽚真实宽度$height=e.detail.height,ratio=$width/$height; //图⽚的真实宽⾼⽐例var viewWidth=718, //设置图⽚显⽰宽度，左右留有16rpx边距viewHeight=718/ratio; //计算的⾼度值var image=this.data.images;//将图⽚的datadata-index作为image对象的key,然后存储图⽚的宽⾼值image[e.target.dataset.index]={width:viewWidth,height:viewHeight}this.setData({images:image})}})最后，我们就可以可以通过images[index].width 和 images[index].height给每⼀个图⽚设置宽⾼了。
JS+css图片自动缩放自适应大小
JS+css图⽚⾃动缩放⾃适应⼤⼩我加了css的限制：复制代码代码如下:div img {}{max-width:600px;width:600px;width:expression(document.body.clientWidth>600?"600px":"auto");overflow:hidden;}◎ max-width:600px; 在IE7、FF等其他⾮IE浏览器下最⼤宽度为600px。
但在IE6中⽆效。
◎ width:600px; 在所有浏览器中图⽚的⼤⼩为600px; ◎当图⽚⼤⼩⼤于600px，⾃动缩⼩为600px。
在IE6中有效。
◎ overflow:hidden; 超出的部分隐藏，避免控制图⽚⼤⼩失败⽽引起的撑开变形。
在放图⽚的页⾯⾥加了复制代码代码如下:<script language="JavaScript">var imgObj;for( i = 0; i < document . getElementsByTagName("img") . length; i++ ){imgObj = document . getElementsByTagName("img")[i];//建议只判断⾼度或者宽度其中⼀个，那样可以⾃动按⽐例缩放if ( imgObj . width > 500 ) //判断图⽚的宽度，如果⼤于700，则设置为700，值可以⾃⼰修改{imgObj . width = 500}if ( imgObj . height > 700 ) //判断图⽚的⾼度，如果⼤于700，则设置为700，值可以⾃⼰修改{imgObj . height = 700}}</script>单独的图⽚控制，⽤这个：复制代码代码如下:<script>var abc=document.getElementById("abc");var imgs=abc.getElementsByTagName("img");for (var i=0,g;g=imgs[i];i++)g.onload=function(){if (this.width>300){this.width=300}else{if (this.height>300)this.height=300}} </script>测试在IE和FF下通过。
CSS3对背景图片的裁剪及尺寸和位置的设定方法
CSS3对背景图⽚的裁剪及尺⼨和位置的设定⽅法背景裁剪CSS Code复制内容到剪贴板1. background-clip:border-box|padding-box|content-box|text⽤于指定background是否包含content之外的border,padding。
默认值为border-box，即background从包含border在内的地⽅开始渲染，IE的默认表现也等同于border-box背景从border(即包括border在内)开始绘制（渲染）CSS Code复制内容到剪贴板1. #background-clip-border{2. -moz-background-clip:border-box; /* For Firefox */3. -webkit-background-clip:border-box; /* For Chrome, Safari */4. -o-background-clip:border-box; /* For Opera */5. -ms-background-clip:border-box; /* For IE */6. background-clip:border-box; /* For Future */7. }背景从padding(即包括padding在内)开始绘制：CSS Code复制内容到剪贴板1. #background-clip-padding{2. -moz-background-clip:padding-box; /* For Firefox */3. -webkit-background-clip:padding-box; /* For Chrome, Safari */4. -o-background-clip:padding-box; /* For Opera */5. -ms-background-clip:padding-box; /* For IE */6. background-clip:padding-box; /* For Future */7. }背景从content(即内容部分)开始绘制：CSS Code复制内容到剪贴板1. #background-clip-content{2. -moz-background-clip:content-box; /* For Firefox */3. -webkit-background-clip:content-box; /* For Chrome, Safari */4. -o-background-clip:content-box; /* For Opera */5. -ms-background-clip:content-box; /* For IE */6. background-clip:content-box; /* For Future */7. }将背景裁剪作为⽂本的填充⾊：CSS Code复制内容到剪贴板1. /* 如果你的浏览器⽀持text值，你将会看到本段⽂字的颜⾊直接使⽤了背景颜⾊：红⾊，且背景将被裁剪掉不再显⽰ */2. #background-clip-text{3. background-color:#f00;4. -webkit-text-fill-color:transparent;5. -webkit-background-clip:text; /* For Chrome, Safari */6. background-clip:text; /* For Future */7. }背景图⽚位置CSS Code复制内容到剪贴板1. background-origin:border-box|padding-box|content-box以border(即包括border)为原点计算背景图的background-position：CSS Code复制内容到剪贴板1. #background-origin-border{2. -moz-background-origin:border-box; /* For Firefox */3. -webkit-background-origin:border-box; /* For Chrome, Safari */4. -o-background-origin:border-box; /* For Opera */5. -ms-background-origin:border-box; /* For IE */6. background-origin:border-box; /* For Future */7. }以padding(即包括padding)为原点计算背景图的background-position：CSS Code复制内容到剪贴板1. #background-origin-padding{2. -moz-background-origin:padding-box; /* For Firefox */3. -webkit-background-origin:padding-box; /* For Chrome, Safari */4. -o-background-origin:padding-box; /* For Opera */5. -ms-background-origin:padding-box; /* For IE */6. background-origin:padding-box; /* For Future */7. }以content(即从content开始)为原点计算背景图的background-position：CSS Code复制内容到剪贴板1. #background-origin-content{2. -moz-background-origin:content-box; /* For Firefox */3. -webkit-background-origin:content-box; /* For Chrome, Safari */4. -o-background-origin:content-box; /* For Opera */5. -ms-background-origin:content-box; /* For IE */6. background-origin:content-box; /* For Future */7. }图⽚背景尺⼨CSS Code复制内容到剪贴板1. background-size:[length|percentage|auto]{1,2}|cover|contain⽤于设置背景图⽚的⼤⼩，有2个可选值，第1个值⽤于指定背景图的width，第2个值⽤于指定背景图的height，如果只指定1个值得，则第2个值默认为auto数值表⽰⽅式：CSS Code复制内容到剪贴板1. #background-size{2. background-size:300px 100px;3. }百分⽐表⽰⽅式：CSS Code复制内容到剪贴板1. #background-size2{2. background-size:40% 80%;3. }等⽐扩展图⽚来填满元素，即cover值：CSS Code复制内容到剪贴板1. #background-size3{2. background-size:cover;3. }等⽐缩⼩图⽚来适应元素的尺⼨，即contain值：CSS Code复制内容到剪贴板1. #background-size4{2. background-size:contain;3. }以图⽚⾃⾝⼤⼩来填充元素，即auto值：CSS Code复制内容到剪贴板1. #background-size5{2. background-size:auto;3. }。
pixmap和label设置图片自适应大小
pixmap和label设置图⽚⾃适应⼤⼩在label中添加pixmap来显⽰图⽚时，当图⽚过⼤时图⽚显⽰不全。
1.这时可以使⽤pixmap的scared（）⽅法，来设置图⽚缩放。
QPixmap.scaled (self, int w, int h, aspectMode = Qt.IgnoreAspectRatio, mode = Qt.FastTransformation) Scales the pixmap to the given size, using the aspect ratio and transformation modes specified by aspectRatioMode and transformMode.If aspectRatioMode is , the pixmap is scaled to size.If aspectRatioMode is , the pixmap is scaled to a rectangle as large as possible inside size, preserving the aspect ratio.If aspectRatioMode is , the pixmap is scaled to a rectangle as small as possible outside size, preserving the aspect ratio.If the given size is empty, this function returns a null pixmap.In some cases it can be more beneficial to draw the pixmap to a painter with a scale set rather than scaling the pixmap. This is the case when the painter is for instance based on OpenGL or when the scale factor changes rapidly.2.可以使⽤QLabel.setScaledContents (self, bool)⽅法来使pixmap⾃适应label⼤⼩测试代码：#encoding:utf-8'''Created on 2016年7⽉10⽇@author: Administrator'''from PyQt4.QtGui import *from PyQt4.QtCore import *import sysclass ImageFrame(QMainWindow):def __init__(self):super(ImageFrame, self).__init__()self.initUI()def initUI(self):#窗体设置self.setGeometry(100, 100, 500, 400)self.setMaximumSize(500, 400)self.setMinimumSize(500, 400)self.setVisible(True)self.statusBar()image = QAction(QIcon('open.png'), 'open', self)image.setShortcut('ctrl+o')image.setStatusTip('open new image')self.connect(image, SIGNAL('triggered()'), self.openImage)toolbar = self.addToolBar('image')toolbar.addAction(image)label = QLabel()label.setGeometry(0, 0, 400, 400)self.setCentralWidget(label)layout = QGridLayout()bel1 = QLabel()bel1.setGeometry(0, 0, 200, 200)#设置label对齐⽅式bel1.setAlignment(Qt.AlignLeft)button = QPushButton('edit')edit = QLineEdit()layout.addWidget(bel1, 0, 0)layout.addWidget(edit, 1, 0)layout.addWidget(button, 1, 1)label.setLayout(layout)self.updataImage()def openImage(self):imageName = QFileDialog.getOpenFileName(self,"Open file dialog","/","jpg files(*.jpg)")self.updataImage(imageName)def updataImage(self, imageName = 'icon.png'):pixmap = QPixmap(imageName)'''图像缩放:使⽤pixmap的scare⽅法，参数aspectRatioMode=Qt.KeepAspectRatio设置为等⽐例缩放，aspectRatioMode=Qt.IgnoreAspectRatio为不按⽐例缩放'''scaredPixmap = pixmap.scaled(400, 400, aspectRatioMode=Qt.KeepAspectRatio)#图像缩放：使⽤label的setScaledContents(True)⽅法，⾃适应label⼤⼩#bel1.setScaledContents(True)print pixmap.height()print pixmap.width()bel1.setPixmap(scaredPixmap)。