如何将URL数据从HTML发送到CSS变量?

Question

我试图将这个卡片样式(https://codepen.io/simeydotme/pen/PrQKgo)集成到我的rails应用程序中。但这似乎很难做到，因为我的代码生成HTML上的图像URL，但这个CodePen有它的图像URL声明在CSS内的变量，如--charizardfront:。

我的问题是，你如何修改这个CodePen，使其通过从HTML中获取url来工作?

CodePen和我的项目使用SCSS，所以也许这给了我们更多的选择?

如果有人感兴趣的话，这是我的卡/s的_profile-quest_cards.html.erb代码:

<div class="profile-carousel profile-carousel--quest_cards">
<div id="profile-carousel-quest_cards-actual">
<% current_user.quest_cards.each do |quest_card| %>
<div class="profile-carousel-item profile-carousel-item--quest_cards" data-asset-id="<%= quest_card.id %>">
<div class="profile-carousel-award profile-carousel-award--quest_cards">
<div class="award-image">
<%= image_tag(quest_card.url) %>
</div>
<div class="award-meta">
<span class="name"><%= quest_card.label %></span>
<span class="for"><%= quest_card.description %></span>
</div>
</div>
</div>
<% end %>
</div>
</div>
<div id="profile-carousel-quest_cards-arrow-left" class="profile-carousel-arrow profile-carousel-arrow--left profile-carousel-arrow--quest_cards">
<div class="arrow-wrapper"><div class="arrow"><span class="cs-icon cs-arrow-down"></span></div></div>
</div>
<div id="profile-carousel-quest_cards-arrow-right" class="profile-carousel-arrow profile-carousel-arrow--right profile-carousel-arrow--quest_cards">
<div class="arrow-wrapper"><div class="arrow"><span class="cs-icon cs-arrow-down"></span></div></div>
</div>
</div>

希望我可以不使用JavaScript完成我的任务，但如果这是最好的解决方案，那么我会接受它。

Answer 1

_{将解决方案从注释迁移到答案:}

因为JavaScript为花哨的动画重写了style属性。这样做:

<div style="--charizardfront: url(https://assets.codepen.io/13471/charizard-gx.webp);">
<div class="card charizard animated"></div>
</div>

- Alex - Jan 17 at 6:31

Answer 2

HTMLdiv不使用url作为属性。你可能正在寻找

<img>

试试

<img src='path'></img>