html - 元素后面的矩形框,同时保留背景图像
问题描述
我试图在图像的中心放置一个矩形框,以便元素在背景图像上可见。
所以这就是它目前的样子:
这就是我希望它看起来的样子,尽管盒子实际上是白色的。
该矩形将具有白色背景,以使文本和其他元素清晰可见,同时在其余部分保留背景图像。
根据要求,这是代码:
<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 可以与之并驾齐驱,除非你想要它的全部?
解决方案
推荐阅读
- python - 如何在 python 中对子进程使用错误处理
- reactjs - Very ReactJS with PHP
- c++11 - C++ 中的 make_shared() 引用计数
- python - Python VTK“标准化”点云
- python - 带有python的opencv中的imshow不是交互式的
- python - 如何在 python Class-list 中有效地制作编号列表
- django - Django model : save object with custom field
- javascript - How can I Check if a sentence contains different word of same letter in Java Script?
- c++ - 构建LinkedList时如何调整头尾指针
- cassandra - Cassandra: the node how to work when a new node joining ring?