Question

我试图在旋转木马上设置一个线性渐变，我将它们放在一起，并希望动态渲染背景图像。 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}}***);
}

Answer 1

您可以根据这样的条件（图片示例）使用ng-style添加网址：

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

在CSS中为线性渐变动态设置背景URL

1 个答案: