我正在使用角度2和角度cli。 我正在尝试在组件的模板中编写一些样式标签。我希望能够根据媒体查询指定背景图像。
我无法将代码直接放在css文件中,因为图像存储在变量中。
我不能使用[style.background-image]绑定,因为基于媒体查询的背景图像会有所不同
在下面的代码中,bkgImg是一个包含图像名称的字符串变量(例如test.jpg),而imageUrl是一个管道,它将根据表示大小的参数构建背景图像的完整URL。
我的问题是这个代码与文档末尾的所有其他样式一起添加(即angular不会用它的值替换变量)
<style>
@media (max-width: 1600px) {
.textWrapper
{
background-image: url({{bkgImg|imageUrl:'1600x1200'}});
}
}
@media (max-width: 1200px) {
.textWrapper
{
background-image: url({{bkgImg|imageUrl:'1200x800'}});
}
}
</style>
我做错了什么?