CSS中的图片路径如何修改

html-css023

CSS中的图片路径如何修改,第1张

在CSS文件里,有时要用到background,即加一个背景图片,一般在做按钮样式时会经常用到。

css中加背景图片根据图片及css文件的相对位置分一下几种类型:

1.同包下:background : url(aaa.gif)

2.不同包:

在这种情况下有2中方法可以设置,一种是使用绝对路径,即http://www.域名.com/aaa.gif这种,不过一般不推荐这么用,不利于项目移植;一种是使用相对路径,首先需要找到图片文件和css文件共同的一个根目录,然后再加上图片的子目录,比如:

css文件位置:WebRoot/test/css/a.css

图片文件位置:WebRoot/platform/resource/images/icons/a.gif

想要找到共同的根目录就需要用到 "../" 这个路径的意思是上一级目录,如果是两层上级目录,就是 "../../" 那么,按照这种写法的话,a.css中得背景图片css应该这么写:

background:url(../../platform/resource/images/icons/a.gif)

详解:

首先,我们观察这两个文件的位置,可以发现,共同的根目录是WebRoot,

我们首先在a.css的位置找到WebRoot,所以有了"../../" 然后拼接图片的子目录的路径 又有了"platform/resource/images/icons/a.gif" 合在一起后就是上面的结果了。

这个是内容页存放目录和内容页存放形式的相关修改。点击栏目-修改-生成选项:

内容页存放目录 栏目目录 自定义: / (从根目录开始) 选择栏目目录,就存放于你设置的栏目目录下(基本属性里栏目存放文件夹 ),从根目录开始,就是自定义目录,填入后本栏目所有内容页都存于此目录下。

你所需要的可以用两种方法:

1、生成选项里直接改 【内容页存放目录】:自定义: / 这里后面的文本框输入b

然后 内容页目录存放形式 选择不设置目录

内容页文件命名形式 选择 信息ID

这样就是b/1.html这种形式

2、修改栏目存放文件夹

根目录/

上层栏目目录 不填本栏目目录b

内容页目录存放形式 选择不设置目录

内容页文件命名形式 选择 信息ID

这样也是b/1.html这种形式

爱建站公益网为您解答,望采纳

引用是用link标签进入的CSS文件。所以可以直接修改link的href就可以修改CSS的链接路径了。下面是个小例子:

<link href="../base.css" type="text/css" rel="stylesheet" id="link1" />

<title>无标题文档</title>

</head>

<body>

<div style="width:100pxheight:100pxborder:1px solid #ccc"></div>

</body>

<script>

var oLink = document.getElementById('link1')

oLink.href = '../../aaa.css' //这样就把link的链接修改为'../../aaa.css'了。

</script>

</html>