Question

我正在尝试将背景图像放在带有一些单选按钮的div中，并根据我们所在的页面将其更新为角度。

app.controller('thingCtrl', function ($scope, $rootScope, $routeParams) {
    console.log("Inside thingCtrl");
    $scope.title = "Thing";
    $scope.talkingPointsImage = "img/thing.svg";
}

main:after {
  opacity: 0.25;
  width: 200px;
  height: 200px;
  top: 0;
  left: 0;
  position: absolute;
  z-index: -1;
  content: "";
}

我无法让它显示出我需要的方式。使用{{}}的路由肯定有效，但我无法正确调整大小。

图像显示但没有透明度，且尺寸不正确。

1）它应该具有透明度，使其显得模糊，并且在背景中并且不会遮挡前面的信息，这些信息仍然可以点击。

2）它的大小应该可以放在信息的后面，可能是200px到200px

Answer 1

这可能不是最佳答案，因为有一个限制。
如果您只想使用背景图片的height和width，则必须设置固定尺寸CSS。我们可以修复它，但它需要一点点jQuery。我不是这种方式的粉丝，但我会发布它，以防万一你想尝试一下。
如果你想设置width和height图像与内容div相同只是取消注释jQuery代码。

＆＃13;

/*$(document).ready(function() {
    $("#first").css("height", $("#second").height());
    $("#first").css("width", $("#second").width());
});*/

＆＃13;

#main {
    position:relative;
}
div#first {
    background-size: cover; /* if you want to stretch the background */
    opacity:0.2;
    width:500px;
    height:300px;
    overflow:auto;
}
div#second {
    position:absolute;
    top: 0;
    left:0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
    <div id="first" style="background-image: url('http://placehold.it/500x500');"></div>
    <div id="second">
        <div class="talking-points">
            <h2>{{title}}</h2>
            <ul>
                <li ng-repeat="issue in subCategories">
                    <input type="radio" name="radio" ng-model="question.stance" ng-value="-1">{{issue.issue}}
                </li>
            </ul>
        </div>
    </div>
</div>

＆＃13;

如何将背景图像放在一组单选按钮后面

1 个答案: