Как разместить фоновое изображение за набором радиокнопок

Question

Как разместить фоновое изображение за набором радиокнопок

0

Я пытаюсь поместить фоновое изображение в 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 на 200px

Femtosecond 04 июль 2015, в 23:40

Источник

Теги:

html

angularjs

css

1 ответ

Ещё вопросы

Wazaaaap · Answer 1 · 2015-07-04T21-28-00.000Z

Вероятно, это не лучший ответ, потому что есть одно ограничение.
Вы должны установить фиксированный размер для height и width фонового изображения, если хотите сделать это только с помощью CSS.
Мы можем это исправить, но для этого требуется немного jQuery. Я не фанат этого типа, но я собираюсь опубликовать его на всякий случай, если вы захотите попробовать его.
Если вы хотите установить width и height изображения так же, как содержимое 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>