Question

我正在编辑几个网页。每个页面都有一个主背景图像，其大小设置为＆＃34; cover＆＃34;

HTML :(主文件）

<div id="main-content" class="main-content">
<div class="main-content__main-image" ng-if="settings['mainImage'] !== 
null">
<style ng-if="settings['mainImageText']">
.main-content__mainImage {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url({{ 
settings["mainImage"] }}) top no-repeat;
background-size: cover;
background-position-y: 50%;
}
</style>
<style ng-if="!settings['mainImageText']">
.main-content__mainImage {
background: url({{ settings["mainImage"] }}) top no-repeat;
background-size: cover;
background-position-y: 50%;
}
</style>

在JS文件中，每个页面的主要图像都是这样生成的：

App.controller("historyCtrl", function($scope) {
$scope.applySettings({
theHeader: "Our History",
theTitle: "Our History",
mainImage: "picture01.jpg",  
mainImageText: "",  
section: [
//etc

对于每个控制器，主图像固定在＆＃34; cover＆＃34;大小，因为那是模板。但是，有些图片太大/太小，我想使用CSS＆＃34;包含＆＃34;背景大小的属性。例如：

background-size: contain;

如何在不更改被设置为“＆＃39; cover＆＃39; ？

Answer 1

给出设置的最简单的解决方案是在控制器中添加样式：

App.controller("historyCtrl", function($scope) {
angular.element('.main-content__mainImage').css('backgroundSize', 'contain');
$scope.applySettings({
    theHeader: "Our History",
    theTitle: "Our History",
    mainImage: "picture01.jpg",  
    mainImageText: "",  
    contains: true,
    section: [
   //etc

但是，通常您应该使用angular来为元素分配和删除类，而不是直接修改样式。 style标签不应包含在body中（更不用说甚至是嵌入式标签）。通过这样做，您可以混合关注点。 HTML正文是您正在呈现的数据的结构，表示是一个单独的问题。

更好的解决方案可能会在您的设置中添加布尔containBackground标记，然后在您的HTML中，使用背景容器中的ng-class属性：ng-class="{'contain-bg': settings['containBackground']}"。最后，您可以将类定义添加到外部CSS：.contian-bg { background-size: contain }

AnguIarJS：如何编辑单个背景图像，使其背景大小与其余背景图像不同

1 个答案: