css使用url引用图片报错

css使用url引用图片报错

css使用url引用图片报错,是因为图片路径填写错误,路径需要相对于css文件,而不是引用css文件的html文件。

例如:

css文件夹下的index.css样式表中background要引入images文件夹下的guanggao.jpg图片。

Snipaste_2019-12-18_14-18-55.jpg

正确的写法是:

background: url("../images/guanggao.jpg");

误区:

一直以为,当在html中引用外部样式表后,那么在样式表文件中定义的样式就相当于在html头文件中定义的样式了,相对路径以html为参考。但事实是,它依然存放在定义的文件中被一起下载到客户端。在定义url时,如果是绝对地址没什么问题,如果是相对地址,那么,一定要相对css/style.css所在的路径,而不必考虑即将引用它的html文件的路径。

(相关课程推荐:css视频教程

解决方法

1、相对路径(相对于html)

在html的头部写样式,就可以相对于html文件的图片的路径了

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
    <link rel="stylesheet" href="./css/index.css">
    <style>
    ..site-bar {
        background:url('./XIAOMI/images/guanggao.jpg');
    }
    </style>
</head>

2、相对路径(外部引入css样式表,相对于style.css引入)

background:url('../images/guanggao.jpg');
Image placeholder
前端答疑
未设置
  26人点赞

没有讨论,发表一下自己的看法吧

推荐文章
css使用float怎么居中?

css使用float怎么居中?css并没有float:center,但是实现水平居中浮动是可以实现的。以下面的Li列表为例,我们要实现中间LI的居中浮动: 列表一 列表二 列表三 我们需要先了解下

如何不写css使div居中显示

如何不写css使div居中显示不使用css使div居中显示,可以使用标签,对其所包括的文本进行水平居中。html代码如下: 这是div 效果:(相关课程推荐:css视频教程)标签说明HT

还在用useState来定义数据吗?教你个更好的方案:useImmer!

以前编写state的方式Hooks上市之前我们是这么定义state的:state={ people:[ { name:'马云', englishName:'JackMa' }, { name:'马化腾

Redis使用不当导致应用卡死

来源:http://rrd.me/ezfTj首先说下问题现象:内网sandbox环境API持续1周出现应用卡死,所有api无响应现象刚开始当测试抱怨环境响应慢的时候,我们重启一下应用,应用恢复正常,于

Stylus系列——webpack-spritesmith配合stylus使用示例

一、前言基于Webpack的CSSSprites实现方案,若是直接在html中调用雪碧图图标已经很方便,但是实际开发过程可能遇到需要在伪元素中使用雪碧图,或者需要hover切换另一个图标,这种情况下就

vue路由使用图文详解

传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。本文将以示例的形式来介绍vue-router的各个特性,一共包含6个示例

iis不显示css引用的图片?

iis不显示css引用的图片?原因有两个:项目文件夹权限问题未开启IIS的静态内容功能(相关课程推荐:css视频教程)解决方法:1、文件夹权限问题的解决方法项目文件夹→属性→安全→编辑→添加→高级→立

webpack中css的url报错?

webpack中css的url报错?css-loader://打包样式中背景图 { test:/\.(png|jpg)$/, loader:"url-loader?limit=8192&name=im

【CSS全解01】CSS基础-体系化学CSS

大纲 基础部分学习占比:HTML1%`CSS19%Javascript80%`(`基础部分?%框架?%`项目?%) CSS历史 AcidTestforbrowser CSS是艺术(非逻辑,用测试经验来

jquey怎么引用css样式

jquey怎么引用css样式jquery引用css只需要一行代码即可,通过传入一个标签,来创建link标签,传入type、href、以及rel给link标签添加属性,最后再调用appendTo方法,将

Java Web html无法引用css?

JavaWebhtml无法引用css?javaweb中html无法引用css是因为css文件放置的位置不正确,css文件应该放在与WEB-INF同级目录,而不是WEB-INF文件夹内。(相关课程推荐:

css添加图片怎样找图片路径?

css添加图片怎样找图片路径?在CSS文件里,有时要用到background-image,即加一个背景图片,一般在显示标题时会经常用到。现在来看两个文件目录:/css/admin/main.css//

不一样的css,sass(scss)的基本使用

前言此文主要记录sass的scss语法的基本使用。sass是css的预编译器,它扩展一些css所没有的变量的定义、条件控制、循环、自定义方法等。基础内容1.变量/*scss*/ //声明变量 $pri

css3.0和css2.0区别?

css3.0和css2.0区别?css3加强了css2的功能,增加了新的属性和新的标签,并且删除了一些冗余的标签,在布局方面减少了代码量。以前比较复杂的布局现在一个属性就搞定了(columns之类的属

css1和css2的区别是什么?

css1和css2的区别是什么?CSS1提供有关字体、颜色、位置和文本属性的基本信息,该版本已经得到了目前解析HTML和XML的浏览器的广泛支持。CSS2.0提供给我们了一个机制,让开发时可以不考虑显

Stack Overflow上188万浏览量的提问:Java 到底是值传递还是引用传递?

在逛StackOverflow的时候,发现了一些访问量像阿尔卑斯山一样高的问题,比如说这个:Java到底是值传递还是引用传递?访问量足足有188万+,这不得了啊!说明有很多很多的程序员被这个问题困扰过

在react中怎么引用js

在react中怎么引用js推荐两种引入的方法,当然也可以自己编写一个JS类(ES6语法)实现动态插入JS到页面,然后在React项目引入。第一种:使用插件react-load-script如果没有安装

如何引用react-dom

如何引用react-dom引用react-dom很简单,首先你需要创建一个react项目,这里我们介绍两种方式,第一种是使用npm来创建,另一种是采用script标签引入react的方式创建项目。●使

详解layui模块化与非模块化的不同引用方式

layui模块化与非模块化的不同引用方式:1、模块化与非模块化的区别layui中有许多不同的内置模块,如弹出层、日期与时间选择器、分页等不同模块。模块化:使用时加载相应的模块。非模块化:一次性加载所有

女朋友问我:小松子,你知道Go语言参数传递是传值还是传引用吗?

课程推荐:GO开发工程师--学习猿地精品课程 前言 哈喽,大家好,我是asong。今天女朋友问我,小松子,你知道Go语言参数传递是传值还是传引用吗?哎呀哈,我竟然被瞧不起了,我立马一顿操作,给他讲的明

css背景图片显示不完怎么解决?

css设置背景图片显示不全是因为背景图片过大导致的,我们可以通过设置div大小大于背景图片或使用background-size属性设置背景图片小于div大小使背景图片显示完全。示例:下面我们来看一下通

css中怎么把图片颜色反转

css中怎么把图片颜色反转css把图片颜色反转可以使用invert滤镜效果,invert滤镜就是为了设置元素的反色效果,它的值设置范围为:0-100%,100%为完全反色,0为显示正常的颜色。.nor

css能实现自动更换图片吗

css能实现自动更换图片吗css能实现自动更换图片,具体的做法是为每一张图片创建一个animation动画,设置不同的duration持续时间,再通过keyframes实现不透明度的变化,来实现更换图

css怎么设置图片平铺方式?

background-repeat属性是用来设置背景图像如何平铺的。默认地,背景图像在水平和垂直方向上重复。属性值:repeat:即默认方式,完全平铺背景;no-repeat:在X及Y轴方向均不平铺;

怎样用css实现图片不间断滚动

怎样用css实现图片不间断滚动效果图:思路分析:第一步,定义div>ul>li*7,因为有7张图片。第二步,设置div的宽度高度以及li的浮动,保证它们全部在div内的同一行。第三步,实现滚动。用到了