0

Hey i'm trying to create form like on first photo, i'm using ionic frameworkenter image description herelooks pretty simple, but i've got some problems with opacity, all my form is with this background opacity, and it's not clear to me how to make only one div with background opacity, here is what i got) enter image description here

and maybe some one tell me how to place this inputs in the middle of div? Here is my HTML

<ion-view class="login-form" name="login-view">
      <ion-content class="padding">
            <div class="login-container">
                 <form>
                    <div class="list list-inset">
                          <label class="item item-input">
                              <input type="text" placeholder="Username" ng-model="data.username">
                          </label>
                          <label class="item item-input">
                              <input type="password" placeholder="Password" ng-model="data.password">
                          </label>
                      </div>
                      <button class="button button-block button-calm" ng-click="login()">Login</button>
                 </form>
            </div>
      </ion-content>
    </ion-view>

Thanks for attention)

Wahtel
  • 161
  • 3
  • 11
  • 2
    you should use rgba() or hsla() colors for background instead opacity :) – G-Cyrillus Aug 26 '15 at 11:22
  • The opacity property is inherited. You can try what @GCyrillus suggest or make overlapping layers using relative and absolute positioning, setting one with opacity and the top overlayer with a transparent background – frikinside Aug 26 '15 at 11:26
  • 1
    http://jsfiddle.net/y0zwre3s/ – Rachel Gallen Aug 26 '15 at 11:30
  • 1
    @frikinside `opacity` is by no CSS means *inherited*. It is just defined as to affect all DOM children as well. – connexo Aug 26 '15 at 11:36
  • @connexo You are completly right! Bad choose of words, sorry about that. In fact, in order to extend info, opacity cannot be overrided, settíng a opacity in a child element would make even less opaque that element. For example a parent with `opacity: 0.5` with a child with an `opacity: 0.5` would set the final opacity of the child element as `0.25` – frikinside Aug 26 '15 at 11:39

0 Answers0