CSS背景图片background-image须注意路径问题

css|背景图片|问题

  在传统的表格布局中,背景图片是直接应用于表格的,一般情况下CSS的background-image属性使用非常少,或者说根本就不使用。应用CSS网页布局,实现内容与表现、行为相分离,作为页面框架、装饰等图片我们就直接剥离到CSS文件中,通过CSS进行定义。

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

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)就可以搞定上面的问题了。

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

时间: 2024-11-30 04:24:25

CSS背景图片background-image须注意路径问题的相关文章

css背景图片的定位问题

我总觉得,CSS中背景图片的定位有些似是而非,这个问题困扰我很久了,今天总算搞懂了,一定要记下来,防止忘记. 在CSS中,背景图片的定位方位有3种: 1)关键字:background-position: top right; 2)像素:background-position: 0px 0px; 3)百分比:background-position: 0% 0%; 上面这三句语句,都将图片定位在背景的左上角,表面上看效果是一样的,实际上第三种定位机制与前两种完全不同. 前两种定位,都是将背景图片左上

div+css 背景图片的定位取图方法

CSS中背景图片定位方法 关键字: css中背景图片定位方法 在CSS中,背景图片的定位方位有3种: 1)关键字:background-position: top right;2)像素:background-position: 0px 0px;3)百分比:background-position: 0% 0%;  上面这三句语句,都将图片定位在背景的左上角,表面上看效果是一样的,实际上第三种定位机制与前两种完全不同. 前两种定位,都是将背景图片左上角的原点,放置在规定的位置.请看下面这张图,规定的

CSS背景图片 background-position 定位

    默认值为: 0% 0% .此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角.     如果只指定了一个值,该值将用于横坐标.纵坐标将默认为 50% .如果指定了两个值,第二个值将用于纵坐标.     如果设置值为 right center,因为 right 作为横坐标值将会覆盖 center 值,所以背景图片将被居右定位. 对应的脚本特性为 backgroundposition . 语法:     background-position : length ||

css 背景图片自动缩放实例

默认情况下,背景属性是平铺的,如果背景图片较大,而box小,那么就只能显示左上角那块背景.如果要让背景全部显示出来,  代码如下 复制代码 .color_checked {  float: right;  width: 16px;  height: 16px;  background: url(../images/color_check.png) center 0 no-repeat;  -webkit-background-size: cover;  -moz-background-size:

CSS网页设计中使用背景图片须注意路径问题

css|背景图片|设计|网页|网页设计|问题 网页设计技巧文章,CSS网页设计中使用背景图片须注意路径问题. 在传统的表格布局中,背景图片是直接应用于表格的,一般情况下CSS的background-image属性使用非常少,或者说根本就不使用.应用CSS网页布局,实现内容与表现.行为相分离,作为页面框架.装饰等图片我们就直接剥离到CSS文件中,通过CSS进行定义. 我们通常用link的方法直接引用一个CSS文件到HTML(或其它活动文档)文件中.我们会发现有时候我们的图片无法显示了.此时,请查看

CSS教程:CSS的Background Images背景图片

  背景图片Background Images有许多属性可以操作. 幸运的是,可以使用background处理所有:   上面合并了下面属性:   可以为大部分html元素设置背景图片,不只是整个页面(body),可以用来制作简单但效果显著的美化,比如圆角等等不同的边角形状. 使用背影图片非常简单,而且可以使用在页面的任何地方.许多人喜欢使用色彩鲜艳的图片作为背景的页面,带给用户判读前台文字困难加大.这是一个极端的例子,但事实上,大部分对用户友好.可读性强的文本是白色背景上显示黑色,或是黑色背景

CSS教程 12、CSS的Background Images 背景图片

背景图片Background Images有许多属性可以操作. 幸运的是,可以使用background处理所有:  代码如下 复制代码 body {     background: white url(/images/bg.gif) no-repeat top right; } 上面合并了下面属性: background-color出现在前面. background-image图片的位置. background-repeat图片重复的形式.背景图片可以重复repeat(这就像建筑用的瓦片一样),

了解学习网页中背景图片CSS实现方法

css|背景图片|网页 背景图片Background Images有许多属性可以操作. 幸运的是,可以使用background处理所有: body {    background: white url(http://www.webjx.com/images/bg.gif) no-repeat top right;} 上面合并了下面属性: background-color出现在前面. background-image图片的位置. background-repeat图片重复的形式.背景图片可以重复r

html-如何让一个<div>的背景图片完全填充这个<div> 谢谢。

问题描述 如何让一个<div>的背景图片完全填充这个<div> 谢谢. 不是插入的图片而是背景图片 background="图片.jpg"; 我百度了一下,用 background-size:100%; 行不通, 请大牛指点. 解决方案 div背景图片居中 解决方案二: You can use: background-size: cover; Or just use a big background image with: background: url('..