在less中使用background-image时，url的设置问题（大坑详解）

最新推荐文章于 2024-05-22 17:40:30 发布
最新推荐文章于 2024-05-22 17:40:30 发布
阅读量3.8k 收藏 1
点赞数 1
文章标签： less 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zuo_kaizheng/article/details/122055414
版权

对于在less样式中使用url报错应该是大家经常遇到的问题

在这里插入图片描述

大家应该都百度到这样的解决代码

在这里插入图片描述
对于第一次遇到这个问题看到这样的代码一脸懵逼，这里的@url是啥子意思，这里的路由该怎么写，好难啊 要泪崩了

问题详解

在这里插入图片描述
在类名前面一定要有（@url）这个参数，整个url(@/images/home/icons.png) 路径 要用 " " 包裹着在前面还要加个 ~ 符号 （相信大家用过这个波浪号，千万别写成—了）

如果看到这里的url解释，相信大家都能轻松解决这个问题了

遇到问题不要慌
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
在less中使用background-image时，url的设置问题
weixin_44771007的博客
05-15 3640
本来尝试了一下es6的模板字符串，然后也没成功 .bg-image(@url) { background-image: ~"url(@{url}@2x.png)"; @media(-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3){ background-image:~"url(@{url}@3x.png)"; } } 在less中，符号 ~ 后面的双引号的内容会被less编译时忽略 less的符号 @ 和 {}
使用less处理重复性background-image定位问题
Maci_yera的博客
08-03 2264
1.问题描述 使用angular的列表循环解释问题，其他框架类似。 css上面使用flex布局index.html代码：<div class='container'> <div ng-repeat='list in itemlists' class='item'> <div class='icon{{$index}}'></div> <p class='itemName'>{{list
在react的组件中或者scss、less中如何引用url、src（background、backgroundImage）
qq_37967853的博客
12-16 1334
在react的组件中或者scss、less中如何引用url、src（background、backgroundImage）
background-image 无效
最新发布
qq_33240556的博客
05-22 741
如果以上都检查过还是无效，可以尝试在浏览器的开发者工具中查看元素（Inspect Element），并检查计算的CSS（Computed tab）看是否有其他CSS规则覆盖了你的。：最常见的原因是图片的路径不正确。确保您的图片路径是相对于样式表（CSS文件）的相对路径，或者是绝对URL。：确认图片文件的权限设置允许Web服务器访问。：确保浏览器支持您使用的图片格式（通常为jpg、png、gif等），并且服务器正确配置了MIME类型。：尝试清除浏览器缓存，有时候旧的CSS或图片文件会被缓存，导致更改不生效。
less background url相对路径取不到编译报错问题
weixin_34405557的博客
05-25 2722
2019独角兽企业重金招聘Python工程师标准>>> ...
vue动态绑定background
weixin_51780751的博客
02-24 6382
background是background-color，background-image，background-repeat，background-attachment，background-position，background-size等属性的缩写。这篇文章我用动态绑定background-image来举例。
Less语言的语法规则及使用
qq_38019052的博客
09-22 536
less学习笔记
解决Vue2.0中使用less给元素添加背景图片出现的问题
11-30
当在URL中使用变量时，正确的方式是`url('@{var}')`，这里的`@{}`用于引用变量。因此，错误出现在： - 在变量名后直接添加`@`符号，Less会尝试解析为另一个变量，如`@{bg_url}@2x.png`。 - 忽略了`@{}`的包裹，如`...
详解在React项目中安装并使用Less（用法总结）
11-30
在React项目中集成和使用Less CSS预处理器可以让开发者更加高效地编写样式，提供变量、嵌套规则、函数等强大功能。以下将详细讲解如何在React项目中安装和配置Less，以及如何利用Less的基本特性来提升CSS开发体验。 ...
在vue 中使用 less的教程详解
10-17
主要介绍了在vue 中使用 less 的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vue-cli初始化项目中使用less的方法
10-18
例如，你可以定义一个颜色变量，然后在整个项目中使用这个变量，当需要改变主题色时，只需要修改一处即可。 在 Vue CLI 项目中集成 Less，你需要遵循以下步骤： 1. 安装依赖： 首先，确保你已经全局安装了 Vue CLI...
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
10-19
这样，Bootstrap的样式和功能就可在Vue项目中使用了。 接下来是引入jQuery。Vue CLI项目通常不直接使用jQuery，但有时仍需引入。引入jQuery的步骤如下： 1. 使用npm安装jQuery： ``` npm install jquery --save...
less的使用
qq_58777190的博客
10-31 595
一、less的简单的用法 首先在vscod里面安装一个Easy LESS的插件，在
less的基本使用
Litt_White的博客
03-30 4820
定义同一变量名称（名字）两次或多次后，less只会选择最后定义的！@bg-img : "路径1";@bg-img : "路径2";@bg-img : "路径3";header {} // 结果为：background : url("路径3");
Less实战（二）：变量
数据库爆破专家的博客
05-05 1421
文章目录变量（Variables）入门实操演示选择器URLsProperties变量之变量懒定义$Prop 变量（Variables） 变量常以@作为名字开头，后接名字，如： @width , @height , @kok , @length 演示中不会做太多讲解，因为less比较简单易用，只需看下代码演示，即可知道其中的真谛 入门实操演示 example.less文件 @width:100p...
less引入图片使用@绝对路径
范天缘的博客
12-14 2831
注意点:记得加~号,只使用@会报错 background-image: url('~@/assets/img/passwordLogo.png');
JavaWeb项目前端学习之CSS background-image的url路径问题
Jessie_is_Gemini的博客
04-12 7112
比较可取的是采用相对路径的方法 在项目的WebContent下新建images文件夹，然后引用改文件夹下图片的相对路径：background-image: url("../images/background.jpg"); 另外补充关于background-image和元素插入图片的区别： background-image属性的特定用途是给元素设置背景图像，唯一的目的是提高元素的吸引力
Vue安装less 使用 background: url()时报错
HarryHY的博客
10-04 1542
This relative module was not found: This relative module was not found: …/…/…/…/images/Leaderboard/Leaderboardbg.png in ./node_modules/css-loader?{“sourceMap”:true}!./node_modules/vue-loader/lib/styl...
Less 基础
小多的博客
11-03 158
Less 是一门 CSS 扩展语言，也叫CSS预处理器 在css的语法基础上，引入了变量、Mixin（混入）、运算以及函数等功能 Less中文网 Less是一门 CSS 预处理语言，它扩展了CSS的动态特性 Less 安装 基于 nodejs 在线安装Less，使用cmd命令 npm install -g less 检查是否安装成功，使用cmd命令 lessc -v 查看版本即可 Less 变量 变量是指没有固定的值，可以改变，如css中的：颜色和数值 @变量名: 值; 变量命名规范 必须有@为前缀
less设置background-image
09-03
要在`less`中设置`background-image`，您可以使用步骤： 1. 首先，确保您已经使用`less`的预处理器来编写样式文件。 2. 在您的样式文件中，选择一个元素或选择器，并为其设置一个类或ID。 3. 使用`background-image`属性设置背景图像。您可以提供图像的相对或绝对路径，或者使用URL。 例如： ```less .my-element { background-image: url('path/to/image.jpg'); } ``` 4. 编译您的`less`文件以生成最终的CSS文件。您可以使用`lessc`命令行工具或将`less`集成到构建工具中。 例如，使用`lessc`编译： ``` lessc styles.less styles.css ``` 或者，使用构建工具（如Webpack、Gulp或Grunt）的相关插件进行编译。 5. 在HTML文件中引入生成的CSS文件，并将类或ID应用于相应的元素。 例如： ```html <link rel="stylesheet" href="path/to/styles.css"> <div class="my-element">...</div> ``` 这样，您就可以在`less`中成功设置背景图像了。请记住，根据图像的位置和路径，您可能需要调整URL的值。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值