css图片下载(jspp软件下载)

图片插入在css与html的区别

Q1.二者有何区别？

A1.写在css里面的图片是以背景图形式存在的，而写在html里的是以<img>标签形式存在的，

在网页加载的过程中，以css背景图存在的图片会等到结构加载完成（网页的内容全部显示以后）才开始加载，而html中的<img>标签是网页结构（内容）的一部分会在加载结构的过程中加载，换句话讲，网页会先加载<img>标签的内容，再加载背景图片，如果你用<img>引入了一个很大的图片，那么在这个图片下载完成之前，<img>之后的内容都不会显示。而如果用css来引入同样的图片，网页结构和内容加载完成之后，才开始加载背景图片，不会影响你浏览网页内容。

Q2.什么图片插入在css，什么图片插入在html里面？

A2.如果是装饰性的图片就写在css里面，如果是内容性的图片就写在html里面，

打个比方，你要做一个有漂亮边框的相册。那么修饰边框的图片就写在css里面，相框里面的内容照片就写在html里面。

Q3.不知道怎样问了，扩展点说就更好。

A3.以后的网页设计方向是表现层和内容层分离，css管表现，也就是显示效果，html管结构，内容结构的划分，这样代码要简洁易维护一些。关于其他回答中的“像<img/>这种属于表现层的东西都会被丢弃的”这种说法是不正确的，内容中的图片还是要使用<img>图标而不是css背景来引入。而“css图片可以复用，<img>图片不能复用”这种说法也不正确，网页加载过程中相同的图片会下载一次并保存在缓存里面，其他地方的<img>使用了同样的图片是不会再去下载的。<img>图片也可以复用。

如何使用CSS调整图片大小的实例代码分享

通常，我们可以给图片<img>设置一个CSS属性，定义其高度和宽度。但有时候，我们只希望控制图片的最大可见大小。这样的操作，一般有两种办法：1.直接使用CSS属性值；2.使用JavaScript动态设置CSS值。

一、固定大小

一般，为了限制图片的大小，会使用下面的HTML属性值或CSS属性值来定义：

<img src="" width="600" height="500" border="0">

img{

width: 600px;

height: 500px;

}

但这样的设置太死板，不够灵活。

二、利用CSS属性值

img.qtipImg{

max-width: 500px;

width: 500px;

width:expression(this.width> 500?"500px": this.width);

overflow:hidden;

}这里定义了一个qtipImg类下面的img标签用CSS规则，通过max-width属性把图片控制在500px的宽度范围，并且是自适应比例的。

但是，各浏览器对该属性的支持并不一致，如IE6不支持该属性。

所以，后面又增加了一个expression的动作，该操作符后面括号中的语句是JavaScript脚本，用于动态的调整图片大小的。

而最后的，overflow:hidden则是为了防止上述两属性定义失效时，将超出设置大小的部分隐藏起来，避免显示异常。

该设定经测试，在IE7、IE8、FireFox 3.5下使用都很正常。

三、利用JavaScript脚本

每个浏览器（包括版本不同）对CSS的支持都会有区别。例如：IE 8下就取消了对expression动作的支持。这时，利用JavaScript来调整图片大小也是一个不错的方法。但它的缺陷在于，使用纯JavaScript脚本，在图片下载期间，大小会溢出，直到下载完成，JavaScript才会把其大小调整到合适的值。

1、借助一个中转的Image对象

两个JavaScript函数：

function getImageSize(FilePath){

var imgSize={width:0,height:0};

image=new Image();

image.src=FilePath;

imgSize.width= image.width;

imgSize.height= image.height;

return imgSize;

}

function fixImageSize(originalImage){

fixSize= 500;

if( originalImage.width> fixSize){

originalImage.height= Math.round( originalImage.height* fixSize/ originalImage.width);

originalImage.width= fixSize;

}

return originalImage;

}

使用时，把图片的地址传递给这两个函数，返回值即为调整后的图片：

img= getImageSize("");

img= fixImageSize(img);

finalresult='<img src="'+attachUrl+'" width="'+img.width+'" height="'+img.height+'" alt="'+filename+'"/>';

2、在加载完DOM后即调整大小

虽然CSS的expression方式将会被取消，但直接使用JavaScript方式计算合适的CSS值还是一个不错的方法。例如jQuery的$(document).ready()方法可以避免加载图片时溢出的问题。

以下脚本来自：这里

$(document).ready(function(){

$('.post img').each(function(){

var maxWidth= 100;//图片最大宽度

var maxHeight= 100;//图片最大高度

var ratio= 0;//缩放比例

var width=$(this).width();//图片实际宽度

var height=$(this).height();//图片实际高度

//检查图片是否超宽

if(width> maxWidth){

ratio= maxWidth/ width;//计算缩放比例

$(this).css("width", maxWidth);//设定实际显示宽度

height= height* ratio;//计算等比例缩放后的高度

$(this).css("height", height* ratio);//设定等比例缩放后的高度

}

//检查图片是否超高

if(height> maxHeight){

ratio= maxHeight/ height;//计算缩放比例

$(this).css("height", maxHeight);//设定实际显示高度

width= width* ratio;//计算等比例缩放后的高度

$(this).css("width", width* ratio);//设定等比例缩放后的高度

}

});

});

dw中用HTML如何将背景图片平铺

具体操作步骤如下：

1、打开Dreamweaver CS6软件后准备好空白的HTML，点击导航上的修改，点击弹出菜单里的页面属性：

2、打开页面属性后选择外观分类，点击背景图像后面的浏览，选择背景图片：

3、在选择图像文件对话框里，选择要设定的背景图片然后点击确定：

4、设置后返回到页面属性对话框，此时可以看到背景图像那有值了，然后设置重复为no-repeat，点击确定：

5、确定之后背景图片平铺添加就成功了：

好了，文章到此结束，希望可以帮助到大家。