将图像 url 从变量传递到 css

Question

我正在从我的数据库中调用产品图片 url，并且在前端页面中，我有一些 CSS 来设置页面上的图片样式。但是，我需要将产品图像的 url 传递到指定图像 url 的 css 中......

我的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 中？所以而不是 ->

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-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;
}