如何在一組單選按鈕后面放置背景圖像

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: ""; } 

 <div class="main" style="background: url({{talkingPointsImage}});"> <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> <!-- begin snippet: js hide: false --> 

我很難讓它顯示我需要的方式。 使用{{}}的路由肯定可以正常工作，但是我無法正確調整其大小。

圖像正在顯示，但沒有透明性，並且尺寸不正確。

1）它應該具有透明性，以使其顯得微弱，並且位於背景中並且不會遮擋其前面的信息，該信息仍然可以單擊。

2）它的大小應使其舒適地位於信息后面，可能是200px x 200px

Answer 1

因為有一個限制，所以這可能不是最佳答案。
如果只想使用CSS，則必須為背景圖像的height和width設置固定大小。
我們可以解決這個問題，但是它需要少量的jQuery。 我不喜歡這種方式，但我打算將其發布，以防萬一您想嘗試一下。
如果要將圖像的width和height設置為與content div相同，則只需取消注釋jQuery代碼即可。

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

 #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; } 

 <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>