html - 在CSS中动态设置背景网址以进行线性渐变

我正在尝试在要放在一起的转盘上设置线性渐变，并希望动态渲染背景图像。 html部分效果很好，但是在CSS中，我试图声明一个垂直渐变，使其底部变黑。我在此网上找到的语法是，您必须在CSS后台声明URL，但是有没有办法在CSS中动态放置后台URL？

到目前为止，这是我的代码：

<div class="container">
       <a href="{{::slide.url}}">
          <img ng-src="{{::slide.background}}" style="margin:auto; width:100%;">
          <h1><span>{{::slide.name}}</span></h1>
       </a>
    </div>

.container {
  position: relative;
  width: 100%;
  height:50vh;
  background: linear-gradient(bottom, black, rgba(0,0,0,0.8), ***url({{::slide.background}}***);
}

最佳答案

您可以根据以下条件使用ng-style添加URL（带有图像的示例）：

<div ng-style="yourCondition === true ? {'background-image':'url(path/to/your/image)'} : {'background-image':'url(path/to/another/image)'}"></div>

我没有测试过，但是在您的情况下，请尝试执行以下操作：

<div ng-style="'background':'linear-gradient(bottom, black, rgba(0,0,0,0.8), url({{::slide.background}})'"></div>

关于html - 在CSS中动态设置背景网址以进行线性渐变，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45247081/