我正在尝试在我放在一起的旋转木马上使用线性渐变,并希望动态呈现背景图像。 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 中为线性渐变动态设置背景 url,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45247081/