代码之家 › 专栏 › 技术社区 › Vignesh Raja

使用CSS自定义变量设置背景图像[重复]

custom-attribute css html

Vignesh Raja · 技术社区 · 7 年前

我想将我的后台url存储在自定义属性(CSS变量)中,并将它们与后台属性一起使用。但是,在将字符串用作 url() .

:root {
    --url: "https://download.unsplash.com/photo-1420708392410-3c593b80d416";
}

body {
    background: url(var(--url));
}

我知道这可以很容易地在Sass或更少使用插值函数,但我很好奇是否有一种方法可以做到这一点,没有任何预处理器。

0 回复 | 直到 9 年前

BoltClock 8 年前

您可以使用大多数CSS函数执行插值,包括 rgba() (参见示例 here

但你不能这么做 url() url(var(--url)) 被解析为 url( var(--url) 后面跟着 ) ,但是一个无效的令牌,因为 变量(--url) 被视为URL本身,并且在 URL() var() 属性值中的表达式 background 声明完全无效。

如果你一点都不明白,那就好了。只知道你不能用 Var() 插值 URL() 因为遗留的原因。

url() 令牌,您不能通过从多个 变量() 如果你想试试 --uo: url(; --uc: ); 或 --uo: url("; --uc: "); ,和 background: var(--uo) var(--url) var(--uc); . 这是因为 custom properties cannot contain unmatched string delimiters or parts of url() tokens (called bad URL tokens) .

URL() 表达式,并替换整个表达式:

:root {
  --url: url("https://download.unsplash.com/photo-1420708392410-3c593b80d416");
}

body {
  background: var(--url);
}

或者,使用JavaScript而不是执行插值。

Synxis Avt 6 年前

我和科尔多瓦在一个项目上有同样的问题,所以我用:

header{
  --bg-header: url(../img/header_home.png) left center/cover no-repeat;
  background: var(--bg-header,
      url("../img/header_home.png") left center/cover no-repeat
  );
}

显然如果你用 URL(“”) VaR

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前