Прямоугольник angular за элементами, сохраняя фоновое изображение - PullRequest
1 голос
/ 17 апреля 2020

Я пытаюсь поставить прямоугольную рамку angular в центре изображения, чтобы элементы были видны на фоновом изображении.

Вот как это выглядит на данный момент:

enter image description here

И это то, на что я хочу, чтобы это выглядело , хотя с окном, фактически окрашенным в белый цвет.

https://ibb.co/JpRn4xv

Прямоугольник будет иметь белый фон, чтобы текст и другие элементы были отчетливо видны, пока сохраняя фоновое изображение на остальных.

По запросу, вот код:

<div class="container-fluid welcome">
<div class="content">
  <h1 class="title" data-ng-if="MLanguages.HOME_WELCOME_TITLE">{{ translate('HOME_WELCOME_TITLE') }}</h1>
  <h1 class="title-preload text-transparent-load" data-ng-if="!MLanguages.HOME_WELCOME_TITLE">Title</h1>
  <h3 data-ng-if="MLanguages.HOME_WELCOME_SUBTITLE">{{ translate('HOME_WELCOME_SUBTITLE') }}</h3>
  <h3 class="text-transparent-load" data-ng-if="!MLanguages.HOME_WELCOME_SUBTITLE">Subtitle</h3>
  <div>
    <!--<div class="form-group col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1" data-ng-show=ADDONS.multilanguage>
      <select class="form-control" data-ng-model="myOrder.lang.id" data-ng-options="lang.id as lang.langText for lang in LangList | filter:lang.enabled = true" default-option="{{ MLanguages.MOBILE_FRONT_SELECT_YOUR_LANGUAGE }}" data-ng-change="selectLanguage(myOrder.lang.id)"></select>
    </div>-->
    <form>
    <div class="form-group col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1" data-ng-show="ADDONS.pickup" select-content>
      <select class="form-control" data-ng-model="search.type">
        <option data-ng-repeat="type in order_types" value="{{type.value}}" data-ng-selected="type.value == search.type">
          {{type.name}}
        </option>
      </select>
    </div>
    <div class="form-group col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1" data-ng-show="SEARCH_BY_ADDRESS">
      <div class="input-group">
        <div class="input-group-addon">
          <i class="fa fa-map-marker"></i>
        </div>
        <!--<input type="text" class="form-control" placeholder="{{ MLanguages.MOBILE_FRONT_VISUALS_ADDRESS_OR_ZIPCODE }}" data-ng-class="{cssArabic: $root.arabic_rtl, noncssArabic: !$root.arabic_rtl}" data-ng-model="myOrder.curAddress" class="font-mid input-home" data-ng-change="googleplace_changed()" id="rest-full-address" googleplace="googleplaceCallback()" data-ng-click="onAutoCompleteAddress()" data-ng-focus="openMap()">-->
        <input type="text" class="form-control home-address" placeholder="{{ translate('MOBILE_FRONT_VISUALS_ADDRESS_OR_ZIPCODE') }}" data-ng-class="{cssArabic: $root.arabic_rtl, noncssArabic: !$root.arabic_rtl}" data-ng-model="myOrder.curAddress" class="font-mid input-home" id="home-address" data-ng-click="openMap()" data-ng-readonly="NEW_FEATURES.MULTI_ADDRESS">
      </div>
    </div>
    <div class="form-group col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1" data-ng-show="!SEARCH_BY_ADDRESS" select-content>
      <select class="form-control" data-ng-model="myOrder.city" data-ng-change="resetDropdownoption()">
        <option value="">{{ translate('FRONT_SELECT_CITY') }}</option>
        <option data-ng-repeat="city in cities | orderBy:'name'" value="{{city.id}}">
          {{city.name}}
        </option>
      </select>
    </div>
    <div class="form-group col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1" data-ng-if="!SEARCH_BY_ADDRESS && myOrder.city != ''" select-content>
      <select class="form-control" data-ng-model="myOrder.dropdownoption">
        <option value="">{{ translate('FRONT_SELECT_NEIBORHOOD') }}</option>
        <option data-ng-repeat="dropdownoption in dropdownoptions | filter:{enabled:true} | orderBy:'name'" data-ng-if="myOrder.city == dropdownoption.city_id || dropdownoption.id == ''" value="{{dropdownoption.id}}">
          {{dropdownoption.name}}
        </option>
      </select>
    </div>
    <div class="form-group content-center col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1">
      <button type="submit" class="btn btn-primary" data-ng-click="findRest()">
        {{ translate('NEW_MOBILE_HOME_START_FIND_RESTAURANT') }}
      </button>
    </div>
    </form>
  </div>
  <div class="clean"></div>
</div>

Там нет никаких CSS до go рядом это еще, если вы не хотите всего этого?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...