目的地-Destination 前程似锦、未来可期、寻得良人、共赴白头,祝你也祝我。
博主 目的地-Destination
沪ICP备16003146号-2沪公网安备 31010702004922号萌ICP备20238488号博主 昨天 10:29 在线自豪地使用 Typecho 建站搭配使用 🌻Sunny 主题当前在线 1 人
歌曲封面 未知作品

沪ICP备16003146号-2

沪公网安备 31010702004922号

萌ICP备20238488号

网站已运行 7 年 349 天 8 小时 0 分

Powered by Typecho & Sunny

1 online · 67 ms

Title

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

Chrison

·

烂笔头

·

Article
⚠️ 本文最后更新于2023年02月18日,已经过了620天没有更新,若内容或图片失效,请留言反馈

CSS变量

答案就是:CSS变量(Custom properties)

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

前提

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

用法

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

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

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

♾️ text 代码:
<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>

大功告成

👇🏻截图中用的webSiteShort,和abc是一样的用法。
iShot_2023-02-17_17.55.34.png

这样,不同的图片,可以传同一个变量应用同一个样式了!
你也可以传任何你想传的值到CSS样式表里。
今天真的是发现了新大陆了!哈哈哈!

CSS变量的功能,不止于此,我只是单拎出来了一个需求来说的。其他用法,可参见W3School

现在已有 270 次阅读,2 条评论,0 人点赞
Comment:共2条
发表
  1. 头像
    @

    好友

    Teacher Du
    CSS死活搞不懂!
    · Chrome · 中国北京市中国移动北京分公司

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
    1. 头像
      @
      以前好像都没有这些。新出来的,我也实在搞不懂
      · 火狐浏览器 · 中国江苏省苏州市电信

      👍

      💖

      💯

      💦

      😄

      🪙

      👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
搜 索 消 息 足 迹
你还不曾留言过..
你还不曾留下足迹..
博主 不再显示
博主