1

I'm trying to blur the background img without the text, but the text is getting blur too. this is a bootstrap-ui-angular modal. It supposed to be easy, but I just can't get it to work.

the css code:

.test:before{
    content: "";
    z-index: -1;

    display: block;
    background: url("../images/3.jpg");

    -webkit-filter: blur(5px);
    filter: blur(5px);


}
.test{
    z-index: 0;
}

the html code :

<form ng-submit="ok()" class="test">
    <div class="modal-header col-lg-12">
        <h3 class="col-lg-4 col-lg-offset-4">{{selectedCard.monitorName}}</h3>
    </div>
    <div class="modal-body">
        <div class="panel-body">
            <div class="form-group">
                <label class="card-lable">kind</label>
                <p class="card-p">{{selectedCard.monitorType}}</p>
            </div>
            <div class="form-group">
                <label class="card-lable">proc</label>
                <p class="card-p">{{selectedCard.monitorProdact}}</p>
            </div>
            <div class="form-group">
                <label class="card-lable">sys</label>
                <p class="card-p">{{selectedCard.monitorSystem}}</p>
            </div>
            <div class="form-group">
                <label class="card-lable">ex</label>
                <p class="card-p">{{selectedCard.monitorExplain}}</p>
            </div>
        </div>
        <div class="modal-footer ">
            <button type="submit" class="btn btn-success col-lg-4 col-lg-offset-4">X</button>
        </div>
    </div>
</form>
Ariel Livshits
  • 591
  • 1
  • 7
  • 23

2 Answers2

1

try this, its from another SO post but it worked in my local tests: http://codepen.io/aniketpant/pen/DsEve

ref: How to apply a CSS 3 blur filter to a background image

try placing it on the other class you don't need it on the ':before' add a blur class to your image and give this a shot 

img.blur {
  filter: blur(20px);
}

check comparability though, not sure what you are supporting but that might be your issue: http://caniuse.com/#feat=css-filters

also refer to this, great guide: https://css-tricks.com/almanac/properties/f/filter/

Community
  • 1
  • 1
Kieranmv95
  • 828
  • 4
  • 14
  • 31
0

They should be in two divs, within the form. one for the text and one for the image. Both have to be position absolute. You might have to mess with their order as you want the div with the image to go behind the div with the text.

then just use that class on just the image DIV.

Hope that helps.

Sergio S
  • 194
  • 7