在angularjs中作爲一個圓圈的蒙版圖像

我試圖'掩蓋'一個圖像，把它變成一個圓圈。下面的代碼加載，調整大小和顯示圖像，但沒有圈子。在angularjs中作爲一個圓圈的蒙版圖像

在我的HTML DIV是指我的控制器：

ng-style='obj.avatar_style'

在我的控制器：

$scope.obj.avatarURL = UserModel.getAvatarURL(); 

$scope.obj.avatar_style = {'width': '30px', 'height': '30px', 'border-radius': '15px', 'background-image': 'url(' + $scope.obj.avatarURL + ')', 'background-size': '30px 30px'}

來源

2016-01-06 jerry

你可以給我們一些反饋意見，你得到的答案是否來自西蒙H和Goldenowner工作很有幫助 –

答案。我忽略了我的CSS中的所有元素都沒有邊界半徑... – jerry

好消息。那麼你需要標記的問題回答 –

我希望這是你想要得到的，你可以自己添加其他樣式。

var app = angular.module('plunker', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.avatar_style = { 
 
    'border-radius': '50px' 
 
    } 
 
});

<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
<head> 
 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script> 
 
    <script src="app.js"></script> 
 
</head> 
 

 
<body ng-controller="MainCtrl"> 
 
    <img src="http://revistasindromes.com/images/100x100.gif" ng-style="avatar_style"> 
 
</body> 
 

 
</html>

來源

2016-01-06 07:05:10 SjaakvBrabant

ngStyle是設置個人風格的元素。在你的情況下，你應該將大部分樣式移動到例如THRE .avatar類樣式表，然後在你的HTML這樣的事情

<div class="avatar" ng-style="{'background-image': $scope.obj.avatarURL}">

來源

2016-01-06 07:00:32

在angularjs中作爲一個圓圈的蒙版圖像

回答

相關問題