• CSS路径问题


    在我的这个项目开发中,有时候总遇到图片无法显示的问题。

    <?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

    Javascript脚本文件,Css样式文件的图片路径问题总是一大难题。因为在js脚本和css文件里我不知该如何像jsp页面一样采用<%=request.getContextPath()%>获取项目根路径。

    所以针对Css中图片路径问题总结如下:

    1、不要给背景图片路径加引号
    background:url("xxx.gif")改为background:url(xxx.gif)
    因为对于部分浏览器加引号反而会引起错误。

    2

    、背景图片的路径是相对与当前css页面的路径。

    例如:
    有如下目录结构
    |--images
    |--xxx.gif
    |--css
    |--xx.css
    |--index.html
    代码内容
    index.html
    引用xx.css文件。<link rel="stylesheet" href="css/xx.css" />
    xx.css
    要引用xxx.gif图片其写法为:background:url(../images/xxx.gif)

    3

    我们通常用link的方法直接引用一个CSS文件到HTML(或其它活动文档)文件中。我们会发现有时候我们的图片无法显示了。此时,请查看你的CSS代码,是不是重复设置有问题,是不是图片的定位有问题。如果这些都没有问题请去掉background的重复与定位属性,还原成默认性。如果图片还是没有出现,那只能是我们今天所说的路径问题了!在一般情况下,我们习惯于这样设置图片路径:

     

    Example Source Code

    background-image:url(logo.jpg);
    background-image:url(../logo.jpg);
    background-image:url(../images/logo.jpg);


      对于第一种情况“url(logo.jpg)”。我们要看此图片是不是与CSS文件在同一目录。对于第二与第三种情况,我们是极力不推荐使用的,因为我们的网页文件可能存在于多级目录中,不同级目录的文件位置注定了我们的相对路径是不一样的。而这样就让问题复杂化了,很可能图片在这个文件中显示正常,换了一级目标,图片就找不到影子了。

      有一种方法可以轻松解决这一问题,我们可能建立一个公共文件目录,用来存放一些公用的图片文件,JS脚本,CSS文件,例如“common”,我们将CSS文件直接置于该目录中,也可以将图片文件也直接存于该目录中,如果图片文件较多在其内部建立一个目录存放图片文件“common/images”。我们在CSS文件中直接写:url(logo.jpg)url(images/logo.jpg)就可以搞定上面的问题了。

    关于网站文件的归类与存放,除了根据个人习惯,还要考虑科学性。如果是大型的项目,你应该遵循团队的约定,不然这些问题是够头疼的!

     

  • 相关阅读:
    UIButton(在代码中使用)
    UIButton的常见设置
    设置按钮的背景图片
    Java Web学习总结(15)——JSP指令
    Java Web学习总结(14)——JSP基础语法
    Java Web学习总结(14)——JSP基础语法
    Oracle学习总结(9)—— Oracle 常用的基本操作
    Oracle学习总结(9)—— Oracle 常用的基本操作
    Oracle学习总结(10)——45 个非常有用的 Oracle 查询语句
    Oracle学习总结(10)——45 个非常有用的 Oracle 查询语句
  • 原文地址:https://www.cnblogs.com/feihusurfer/p/1551308.html
Copyright © 2020-2023  润新知