Html 元素后面的矩形框,同时保留背景图像

Html 元素后面的矩形框,同时保留背景图像,html,css,Html,Css,我试图在图像的中心放置一个矩形框,这样背景图像上的元素就可以看到 这就是目前的情况: 这就是我希望它看起来的样子,尽管盒子实际上是白色的 矩形将有一个白色的背景,以允许文本和其他元素清晰可见,同时在其余部分保留背景图像 根据要求,以下是代码: <div class="container-fluid welcome"> <div class="content"> <h1 class="title" data-ng-if="MLanguages.HOME_WEL

我试图在图像的中心放置一个矩形框,这样背景图像上的元素就可以看到

这就是目前的情况:

这就是我希望它看起来的样子,尽管盒子实际上是白色的

矩形将有一个白色的背景,以允许文本和其他元素清晰可见,同时在其余部分保留背景图像

根据要求,以下是代码:

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

{{翻译('HOME\u WELCOME\u TITLE')}
标题
{{翻译('HOME_WELCOME_SUBTITLE')}
字幕
{{type.name}
{{translate('FRONT_SELECT_CITY')}
{{city.name}
{{translate('FRONT_SELECT_neigborhood')}
{{dropdownpoption.name}
{{翻译('NEW_MOBILE_HOME_START_FIND_RESTAURANT')}


除非你想要它的全部,否则还没有任何CSS可以与之搭配

请发布您当前的HTML+CSS。通常,您发布的黑色矩形中的所有代码都位于div/容器中。可以对该元素应用背景色。我们需要查看您的示例代码。请发布您当前的HTML+CSS。通常,您发布的黑色矩形中的所有代码都位于div/容器中。可以对该元素应用背景色。我们需要查看您的示例代码。