javascript - 在angularjs中添加背景图片,css不起作用

标签 javascript html css angularjs

在使用 ng-style 设置背景图像后,我似乎无法在元素上应用 css 中的样式。

HTML:

<body id="bg" ng-controller="BgImagesListController" ng-style="selBGImg">

CSS:

#bg {
    background: center center fixed transparent;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size:contain;
}

JS:

var mlwcApp = angular.module('mlwcApp', [])
.controller('BgImagesListController', function($scope, $http) {

    $scope.selBGImg = {
        background : 'url(bgimgs/bg.jpg)'
    };
});

我曾经在 css 中设置背景图像并且它有效。使用 ng-style 后,图像可以显示,但所有其他样式都消失了。有什么想法吗?

最佳答案

将背景更改为'background-image':'url(bgimgs/bg.jpg)'

var mlwcApp = angular.module('mlwcApp', [])
.controller('BgImagesListController', function($scope, $http) {
    $scope.selBGImg = {
        'background-image' : 'url(https://wiki.teamfortress.com/w/images/thumb/e/ec/Das_Naggenvatcher.png/250px-Das_Naggenvatcher.png)'
    };

})
[id="bg"] {
    background: center center fixed transparent;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size:contain;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body id="bg" ng-app="mlwcApp" ng-controller="BgImagesListController" ng-style="selBGImg">
    
</body>

关于javascript - 在angularjs中添加背景图片,css不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32968835/

相关文章:

javascript - 让 Foundation 6 在 IE8 上运行

html - CSS 渐变导航设计

javascript - 形式选项中的方程

javascript - 从 AJAX 返回 JSON 对象获取某些值

javascript - 在 Vimeo 嵌入上按下播放时向正文添加一个类

javascript - Jquery & secton 没有隐藏我的标志 div id

javascript - azure队列触发函数从两个不同的队列中拉取

javascript - SAPUI5 应用程序中的输入字段失去焦点

javascript - 带事件发射器的触发功能

css - 每个组件的样式 mat-select-value