将图像url从变量传递到css

Question

我正在从我的数据库中调用一个产品图像url，在前端页面中，我有一些css对页面上的图像进行样式化。但是，我需要将产品图像的url传递到css，它指定了图像的url...

我的CSS：

  .product-image .bg{
  background-image: url('https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mnx8dHNoaXJ0fGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60  ');
  background-size: cover;
  background-position: center top;
  width: 100%;
  min-height: 450px;
}

显示背景图像的产品页面

<div class="product group">
<div class="col-1-2 product-image">

如果将product-image放在div中，它将呈现产品图像。如何将此url<%=data[I].image_url%>传递到CSS中？所以没有->

背景-image:url('https://images.unsplash.com/photo-1521572163474-6864f9cf17ab？ixid=mxwxmja3fdb8mhxzzwfyy2h8mnx8dhnoaxj0fgvufdb8fdb8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60')；->

我将有背景-image:url('<%=data[I].image_url')；

这可能吗？

Answer 1

这是可以做到的。只要你把它放在一个.aspx上，或者在服务器上呈现的任何其他页面上，你就会很好。只需将其改为使用双引号而不是单引号即可。

product-image .bg {
    background-image: url("<%=someImageURL%>");
    background-size: cover;
    background-position: center top;
    width: 100%;
    min-height: 450px;
}