h5直接用图片还是divcss

html-css015

h5直接用图片还是divcss,第1张

h5直接用图片

1.使用 有一个好处是,用户可以很方便的右键保存或者复制图片的链接。

2.图片做为背景,在图片没加载的时候或者加载失败的时候,不会有个图片的占位标记,不会出现红叉。

PS:一般图片下载站会希望访客、用户去下载站内的图片,一般的企业或者站长其实并不希望同行或者竞争对手下载并盗用网站上的图片。第二点出现红叉应该是古老的IE浏览器才会出现,而且随着宽带网速的提升,这种情况并不多见。

3、 在网页加载的过程中,以css背景图存在的图片会等到结构加载完成(网页的内容全部显示以后)才开始加载,而html中的标签是网页结构(内容)的一部分会在

加载结构的过程中加载,换句话讲,网页会先加载标签的内容,再加载背景图片,如果你用引入了一个很大的图片,那么在这个图片下载完成之前,之后的内容都不会显示。而如果用css来引入同样的图片,网页结构和内容加载完成之后,才开始加载背景图片,不会影响你浏览网页内容。这算比较大的区别之一。

4.如果是装饰性的图片就写在css里面,如果是内容性的图片就写在html里面。打个比方,你要做一个有漂亮边框的相册。那么修饰边框的图片就写在css里面,相框里面的内容照片就写在html里面。

banner要设置高度,或者<div id="banner"></div>之中有内容,否则高度为0,当然看不到背景图了

#banner {background: url('banner.jpg') 0 30px no-repeat

width:730px/*设定层得高度*/

height:200px/*设置高度*/

margin:auto

border-bottom:5px solid #EF0000

clear:both /*清楚浮动*/}

实现的方法和详细的操作步骤如下:

1、第一步,打开操作软件并使用DW定义内部CSS样式,见下图,然后进入下一步。

2、其次,完成上述步骤后,看一下背景图片的效果,见下图,然后进入下一步。

3、接着,完成上述步骤后,将img添加到div并输入以下代码,见下图,然后进入下一步。

4、最后,完成上述步骤后,就获得了想要的结果了,如下图所示。这样,问题就解决了。