HTML标签里的值是如何动态传递给CSS样式表的？

CSS变量

答案就是：CSS变量（Custom properties）

P.S. 原谅我这个前端菜鸟，前端大佬勿喷。我只是个搞后端的！

前提

因为今天遇到了一个问题。 我有一系列的图片要当做背景的，并且只有鼠标before时，才展示背景图。 而背景相关的样式，都在CSS表，那我怎么把图片地址传给CSS样式里的background呢？ 这时候，CSS变量就可以发挥作用了。

用法

CSS样式表：定义一个类名.abc，变量用var包裹：var(--abc)

代码语言：javascript复制

.abc {
　　XXXX
}
.abc::before{
　　background-image:  var(--abc);
　　background-attachment:fixed;
　　background-size: cover;
　　position: absolute;
　　background-color: #A0DAD0A0;
}

HTML页面：使用变量名代替样式标签

代码语言：javascript复制

<ul >
　　<li class="abc" style="--abc: http://XX1.png ;"></li>
　　<li class="abc" style="--abc: http://XX2.png ;"></li>
　　<li class="abc" style="--abc: http://XX3.png ;"></li>
　　<li class="abc" style="--abc: http://XX4.png ;"></li>
</div>

大功告成

0 人点赞