英文:
SCSS file use of image / url() won't appear in page styles
问题
以下是翻译好的部分:
两周前,我将所有的CSS文件转换为SCSS文件。除了背景图像的使用外,一切正常。我一直在寻找解决方案,但似乎类似的问题多年来一直得不到解答。
理想情况下,我希望将图像设置为一个变量,但我甚至无法直接在选择器中使其工作,如下所示:
.container {
background-image: url(../../media/wood8.jpg);
}
我知道我的路径是正确的,它在普通的CSS文件中完美运行,但转换为最终CSS的SCSS文件似乎是完全相同的,但却无法工作。
我对我做错了什么感到困惑。
我的变量如下:
$background1: linear-gradient(
90deg,
rgba(0, 0, 12, .70) 0%,
rgba(14, 39, 106, 0.2) 30%,
rgba(21, 43, 102, 0.2) 55%,
rgba(22, 31, 55, 0.2) 75%,
rgba(0, 0, 12, .60) 95%,
url("../../media/wood8.jpg")
);
我调用此变量的方式如下:
.base1 {
background: $background1; color: $lt;
}
请注意,线性渐变实际上显示出来,但与之一起应该显示的图像却没有显示出来。此外,渐变只在"background"属性中显示,任何尝试使用"background-color"或"background-image"都无法显示任何内容。
另外,我尝试将我的图像作为独立的变量:
$wood8: url(../../media/wood8.jpg);
尝试将其调用到$background1中失败。同样,尝试在类选择器中使用它也失败,如下所示:
.container {
background-image: $wood8;
}
我还尝试将变量编写并相应地调用如下:
$imgPath: "../../media";
$wood8: "wood8.jpg";
background: url(#{$imgPath}/#{$wood8});
$wood8: "../../media/wood8.jpg";
background: url(#{$wood8});
$wood8: url("../../media/wood8.jpg");
background: $wood8;
$wood8: "url(../../media/wood8.jpg)";
background: $wood8;
这些是与您的问题最相关的部分,但要注意其中某些部分可能需要进一步的上下文才能完全理解。
英文:
Two weeks ago I converted all my css to scss files. Everything except the use of a background image is working. I have been researching solutions to no avail because it seems that similar questions have all gone unanswered for several years.
Ideally I would like the image to be set as a variable, but I can't even get it to work directly in a selector like this:
.container {
background-image: url(../../media/wood8.jpg);
}
I know my path is correct and it works perfectly in a regular css file but the Scss file converted to the final css appears to be the exact same and yet it doesn't work.
I am confused by what I am doing wrong.
My variable looks like this:
$background1: linear-gradient(
90deg,
rgba(0, 0, 12, .70)0%,
rgba(14, 39, 106, 0.2)30%,
rgba(21, 43, 102, 0.2)55%,
rgba(22, 31, 55, 0.2)75%,
rgba(0, 0, 12, .60))95%,
url("../../media/wood8.jpg");
My call for this variable is this:
.base1 {
background: $background1; color: $lt;
}
Please note that the linear-gradient actually appears, but NOT THE IMAGE that is supposed to go with it. Additionally the gradient only appears with "background" - any attempt to use "background-color" or "background-image" fails to show anything at all.
Alternately I have tried making my image its own variable:
$wood8: url(../../media/wood8.jpg);
Attempting to call it into $background1 is a fail. So is trying to use it in a class selector, as such:
.container {
background-image: $wood8;
}
I have also tried variables written and respectively called in as:
$imgPath: "../../media";
$wood8: "wood8.jpg";
background: url(#{$imgPath}/#{$wood8});
$wood8: "../../media/wood8.jpg";
background: url(#{$wood8});
$wood8: url("../../media/wood8.jpg");
background: $wood8;
$wood8: "url(../../media/wood8.jpg)";
background: $wood8;
These links are the questions most similar in nature to what I am struggling with, but they aren't exact and have gone unanswered for several years.
https://stackoverflow.com/questions/62411233/is-it-possible-to-pass-background-image-as-variable-vuejs-scss,
https://stackoverflow.com/questions/57449435/background-image-url-not-compliling-using-sass,
https://stackoverflow.com/questions/21123589/scss-background-image-url-rails-4
答案1
得分: 0
我检查路径吗?背景图在SASS上始终正常工作。等等,您尝试过不使用变量吗?因为我检查过,它可以正常工作:
background: linear-gradient(
90deg,
rgba(0, 0, 12, .70)0%,
rgba(14, 39, 106, 0.2)30%,
rgba(21, 43, 102, 0.2)55%,
rgba(22, 31, 55, 0.2)75%,
rgba(0, 0, 12, .60))95%, url(/src/assets/top-background.png) no-repeat;
我想你不能在属性中使用变量,比如 "background"。
英文:
Do you check path? Background-image always work correct on SASS. Wait, you tried without variables? Because I checked this and its work:
background: linear-gradient(
90deg,
rgba(0, 0, 12, .70)0%,
rgba(14, 39, 106, 0.2)30%,
rgba(21, 43, 102, 0.2)55%,
rgba(22, 31, 55, 0.2)75%,
rgba(0, 0, 12, .60))95%, url(/src/assets/top-background.png) no-repeat;
I suppose you cant put variables in property like "background"
答案2
得分: 0
图像可以用作变量。
对于这个特定问题,图像的文件路径可能根据您的variables.scss文件的位置是正确的,但不要忘记最终页面是根据转换后的main.css文件运行的,因此您必须调整路径,以确保从main.css文件的位置正确。
改为:
$wood8: url(../media/wood8.jpg);
这应该解决您的问题。
英文:
Images can be used as variables.
For this specific issue, the file path to the image may be correct according to the location of your variables.scss, but don't forget that ultimately the page runs off of the converted main.css file, so you must adjust your path to be correct from the main.css location.
instead of:
$wood8: url(../../media/wood8.jpg);
try backing it up a level:
$wood8: url(../media/wood8.jpg);
This should fix your issues.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论