为什么background:url(imagespath)不起作用

最新推荐文章于 2024-03-21 10:05:05 发布
最新推荐文章于 2024-03-21 10:05:05 发布
阅读量3.1k 收藏 4
点赞数
文章标签： html css less
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42444795/article/details/105929227
版权

因为我也是html初学者,所以在使用background:url();的时候难免会出错，就是不知道何时用background: url(images/timg.jpg)或者何时用background: url(…/images/timg.jpg):经过网上的综合，总结出以下。
当你的style样式在html里面时，用background: url(images/timg.jpg)；例如以下html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
.show{
    width: 100%;
    height: 1000px;
    background: url(images/timg.jpg) no-repeat;
}
</style>
<body>
    <div class="show"
文件目录如下 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200505105435123.png) 虽然我创建了一个css样式文件，但是我具体的样式嵌入html中，所以background: url(../images/timg.jpg)或者background: url(./images/timg.jpg)和background: url(/images/timg.jpg)都是无效的。 但是一旦我的样式文件放进css文件夹中，如下

index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="css/css.css">
<body>
    <div class="show"></div>
</body>
</html>

css.css文件

.show{
    width: 100%;
    height: 1000px;
    background: url(../images/timg.jpg);
}

在这里插入图片描述
这时候就得使用 background: url(…/images/timg.jpg);了，同理其他方式都没用。

独夜
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
使用css的background:url设置背景图方法
09-25
设置背景图的方法一般是使用css的background:url来实现的，下面有个示例，大家可以参考下
background：url（）不显示 总结
weixin_30781433的博客
06-01 1882
对于background：url(imagePath);图片的不显示问题，有以下两种情况: 一.imagePath出错： 当你所写的css文档与HTML文档不在同一级的情况下，比如 css文档存储在style文件夹中，css中的background：url（imagePath）imagePath需要这么写：(../images/image.jpg...
使用background 的url 引入背景图片失效的问题
最新发布
galaxyJING的博客
03-21 286
有人可能会说根目录不行吗，我尝试过是不行的，这还是和css外部样式有关，做一个设想：我们在head里面直接写style可以吗，这样是可行的，但是这样代码的可读性和可维护性不高，所以我还是推荐使用相对路径. ./来引入。就会先转到工程文件目录下，那么就能找到images文件夹，也就能找到我们想要的图片。因为我们一般开发引用的是外部样式表，使用该路径在当前目录下找不到images文件夹，那么也就找不到我们所想要引用的图片。. . /表示的是上一级目录 同理. . /. . /表示的是上上级目录。
CSS中background:url(图片) 不能显示的问题
KELION1234的博客
11-20 1万+
刚刚碰到一个奇怪的问题，这样一段CSS代码：1 .pho6 {background: url(img/pho6.jpg); }这段代码居然不能显示出背景图片,路经绝对是没错的代码肯定没有问题，俄,百度了好久终于让我给找到了真正的问题在哪？在url(imagepath)里的这个imagepath(图片路径)。原来它是相对于.css文件所在的文件夹，也就是调用css文件夹下的子文...
vue中background-image图片路径问题
weixin_30376083的博客
03-14 1598
按照以往在css文件中写background:url('图片路径')，完成后加载竟然显示出错，起初以为路径不对，检查了几遍，仍然没有问题。最后百度找答案，发现不少同行都遇到过这种问题，遂记录下自己所采用的解决方式： data () { return { img: require('你的图片路径') } } div的写法： <div :...
CSS中使用background:url(地址)显示，但是background-image:url(地址)不显示的原因
Always-Learning
11-14 5552
问题描述 CSS中使用background:url(地址)显示，但是background-image:url(地址)不显示的原因 例如：下面的写法不显示图片 background-image: url(../upload/bargain.png) no-repeat; 下面的写法却显示图片 background-image: url(../upload/bargain.png); background: url(../upload/bargain.png) no-repeat; 问题原因 因为back
html backgroundurl无效,css background不显示是什么原因？
weixin_34053992的博客
06-04 7655
在CSS中，可以使用background属性来设置背景，可以设置背景色，也可以设置背景图片。但有时background不显示，这是什么原因？下面本篇文章就来给大家介绍一下，希望对大家有所帮助。css background不显示是什么原因？1、css没有被调用；请检查css调用是否成功，2、div设置错误容易导致背景图片高度太大则无法显示，3、css设置背景用的background，书写方式是.di...
scss background: url（）路径无效问题
jack_rose_me的博客
04-08 4601
@import "../style/lines.scss" 导致background: url（）路径无效问题 解决方案是在webpack中的vue.config.js中配置 configureWebpack: config => { let obj = {}; obj.resolve = { alias: { 'img': '@/assets/img', } }; return obj } 然后在lines.scss中...
CSS大法----css样式表里面引用background-image时，url路径错误原因及解决方法
qq_36789311的博客
08-01 5762
CSS大法----css样式表里面引用background-image时，url路径错误原因及解决方法 一直对css中background：url的路径问题存在误解，半知半解的，有时候路径写的对，有时候又是错的，完全碰运气，今天写resume时又遇到这个问题，在此整理下： css文件夹下的index.css样式表中background要引入images文件夹下的guanggao.jpg图片。 ...
url地址的图片路径
weixin_30505225的博客
12-20 1620
url地址的图片路径： 　　（./images/1.jpg） 中的./指根路径，有或没有都可以； 　　（../images/1.jpg） 中的../指相对路径； 　　（../../images/1.jpg） 中的../../指文档的相对路径的上级。 转载于:https://www.cnblogs.com/liuting1314521/p/6203477.html...
vue项目中设置background: url() 是行内样式不生效，样式表是可以的
MISS_zhang_0110的博客
11-17 1045
[TOC](vue项目中设置background: url() 是行内样式不生效，样式表是可以的)首先：如果不是项目中普通的一个index.html中是可以的。
Javascript获取background属性中url的值
10-21
Javascript获取CSS中属性值方法有很多，今天工作的时候遇到了一个问题是需要利用Javascript获取css中background-img属性url的值，通过查阅网站的资料找到了解决方法，现在将方法分享给大家，有需要的朋友们们可以...
css 中的background:transparent到底是什么意思有什么作用
12-13
有时我在看css时,看到有的css属性定义为background:transparent。意思就是背景透明。实际上background默认的颜色就是透明的属性。所以写和不写都是一样的 有段时间没写文章了,一直在学校,虽然带着电脑,但是不能上网...
background:在后台运行事物
04-23
基本用法import timeimport background@ background . taskdef work (): # Do something expensive here. time . sleep ( 10 )for _ in range ( 100 ): work ()高级用法import timeimport background# Use 40 ...
background:背景视频嵌入
06-22
#Background Video Integration 此模板是一个示例，说明使用 Somevid 的骨架网格和背景视频创建登录页面是多么容易。 只需几行代码，您就可以开展业务。 您应该将此代码粘贴到 html 正文的主要部分。 在 somevid....
electron-desktop-background:将任何网页设置为桌面背景
05-08
电子桌面背景 将任何网页设置为Mac桌面背景。 安装 苹果系统 .dmg文件。 开发人员 内置。 跑步 $ npm install $ npm start
Webpack CSS/SCSS中url()无法正常解析解决方案
https://github.com/blingbling-110
08-11 1445
仅供参考 软件包版本： { "css-loader": "^6.2.0", "css-minimizer-webpack-plugin": "^3.0.1", "mini-css-extract-plugin": "^1.6.0", "sass": "^1.35.1", "sass-loader": "^12.1.0", "url-loader": "^4.1.1", "webpack": "^5.39.1", "webpack-cli": "
CSS中background-image:url(图片路径) 不能显示的问题
cc0809_的博客
07-05 6249
最后发现用下面这个写法可以了，我也不知道为什么要从上一级目录开始，和img标签的路径写法不一样，留个记录。3、基本就是路径问题用了好几种写法都不行/img/1922.jpg、../img/1922.jpg。1、通过添加其他样式如background-color: blue;2、把图片用浏览器打开也可以正常显示，所以图片没问题；开始如上图所示，然后发现图片死活出不来。
CSS—background: url(imagePath);使用小结
热门推荐
草堂夜归人
09-20 2万+
CSS之background: url();使用小结 作为前端初学者，总是会遇到这样哪样的疑惑。这不，这次在background 属性时遇到了问题——即运用了background: url( imagePath );后不起作用。 最后在百度上搜了下发现遇到同样问题的人还真不少，但是很多人的回答并没有说到点上去，所以经过自己的摸索后今天把我的“总结”贴出来供大家交流。 真正的问题
background:url为什么不显示‘’
06-09
在使用 CSS 中的 background 属性设置 URL 时，如果 URL 中包含空格、引号、括号等特殊字符，需要使用引号将 URL 包裹起来。如果引号缺失或者使用了错误的引号，就可能导致 URL 无法正常显示。 例如，以下代码中的 URL 包含空格，需要使用引号： ``` background: url("images/background image.jpg"); ``` 如果没有使用引号，就会出现如下错误： ``` background: url(images/background); /* 无法显示图片 */ ``` 因此，如果 background:url 不显示，可以检查 URL 是否正确包裹引号。同时，也需要确保图片路径是否正确，以及图片是否存在。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

独夜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值