<p>ASP.NET网页布局时，经常会写用户控件这样的东西。图求方便。在控件中不乏需要引入一些图片。很多时候控件被使用的位置变动性</p><p>很大。今天又很纠结的遇到了这么一个问题。终于，下定决心来探个究竟。</p><p>简单的文件结构图：</p><p></p><p>一丶当CSS样式文件嵌入在用户控件中是，如何让图中三个页面引用控件时均能正常浏览到对应的图片呢？</p><p>OK。当您看到这个问题时，可能会想到页面中三个文件根本就不处于同一个目录，或文件所处的深度级数都不相同，在构想阶段可能就否定了这个实现。接下来在Defalut.aspx页面中嵌入如下测试代码：</p><p><styletype="text/css"></p><p>#test{background:url(../../../images/xw_checklist.jpg)no-repeat;height:28px;width:220px;}</p><p></style></p><p>BODY中代码如下：</p><p><divid="test"></p><p></div></p><p>通过引用的图片路径来看，3次目录返回后。是肯定找不到对应的图片了。为此，我在根目录回返3次的文件目录下放置了一个同名但不同图像的图片。运行后发现，结果仍能够正确的加载到images下的对应图片。OK，在这里我推测。VS加载图片路径时。文件的根目录(即Default.aspx)为终点引用目录。那么让图中三个页面引用控件时均能正常浏览到正确的图片时。那么可以在用户控件picbox的内嵌样式中给出如下图片路径：../../images/xw_checklist.jpg</p><p>总结：当CSS样式文件内嵌在用户控件中时，只要保证深度级数最大的页面能够正确显示图片即可(在设计拆分时，除了文件深度和控件中内嵌的CSS样式图片深度相同的能够正确预览，其余的均查看不到。但是不影响运行结果。)</p><p></p><p>二丶当CSS做为外部引用的方式嵌入到页面时，只要保证CSS中能够正确找到对应的图片即可。</p><p>例如本结构图中，让3个界面正确的加载图片只需要如下写就OK了：</p><p>针对a.css图片路径这样写：background:url(../images/xw_checklist.jpg)no-repeat;</p><p>针对b.css图片路径这样写：background:url(../../images/xw_checklist.jpg)no-repeat;</p><p>本人亲测可行,且在拆分设计时，能够预览到对应的图片。</p><p>总结：页面中嵌入外部css文件时,仅仅是提供一个样式连接,并不会将其加载到页面页面中,如在本例中,页面只会根据链接去css文件中寻找所需要的图片文件！</p><p></p><p>三丶JS中设置图片又如何呢？</p><p>具体测试如下：</p><p>在a.js中写入如下代码：</p><p>varfunSet=function(obj){</p><p>obj.style.backgroundImage='url(images/xw_checklist.jpg)';}</p><p>在b.js中写入如下代码：</p><p>varfunSet2=function(obj){</p><p>obj.style.backgroundImage='url(images/xw_checklist.jpg)';}</p><p>在default.aspx页面中引入ab两个脚本文件。并在body中嵌入代码如下：</p><p><divclass="style1"onclick="funSet(this);"></p><p></div></p><p><br/></p><p><divclass="style1"onclick="funSet2(this);"></p><p></div></p><p>ab两个脚本深度不相同。但是均被同一个页面所引用.通过default页面找图片时。路径格式为images/xxx.jpg页面运行后。点击图片均能正常加载。</p><p>总结：对于js脚本,html是把脚本加载到页面中一起解析的(就跟你的js脚本直接写在这个页面是同样的效果)。所以在JS中只需要图片相对于JS的引用页面的路径就可以了。</p>
