Place filter to a background image with css

Question

Place filter to a background image with css

Navigation

#1 by (0 votes)

0

I want to place a filter on an image that I will put in the background by applying background-image:url(url..); to div but I have a problem, the filter is also taking the content that is inside the box and I just want to apply the filter to the image and that the content, whether text or inputs go without it.

To place the filter just take a <div id="container-fluid-slider> and the id that you put that div apply the filter filter:brightness(0.5); but as I said before I'm taking the content within it.

#container-fluid-slider {
  background-image: url(http://www.gelfuzion.com/img/slides/nivo/bg-1.jpg);
  height: 70vh;
  width: 100%;
  font-family: 'Fredoka One', cursive;
  position: relative;
  filter: brightness(0.5);
}

#container-fluid-slider p {
  font-family: 'Barlow', sans-serif;
  font-weight: 600;
}

#form-slider input {
  width: 80%;
  height: 50px;
  border-radius: 5px;
  border: none;
}

#form-slider button {
  width: 30%;
  height: 50px;
  border-radius: 5px;
  border: none;
  color: #FFF;
  background: #268ab9;
  font-size: 20px;
  transition: 0.5s;
}

<div 
  class="container-fluid d-lg-flex justify-content-center align-items-center" 
  id="container-fluid-slider">
  <div class="row">
    <div class="col-12 d-lg-flex flex-lg-column " id="col-12-slider">
      <h1 class="text-center">Find Sudan's places number</h1>
      <p class="text-center">Find important numbers such as Hospitals! Pharmacies! Companies etc!</p>
      <div class="line d-lg-flex flex-lg-row" id="form-slider">
        <input type="text" name="" value="" placeholder="Search Number">
        <button class="d-inline ml-3"><i class="fas fa-search text-white pr-3"></i>Search</button>
      </div>
    </div>
  </div>
</div>

html css

asked by Victor Escalona 29.06.2018 в 04:03

source

1 answer

What is the solution to all present, past and future NullPointerException errors? Show checkbox selected at the top of the table

score 0 · Answer 1

As Arnau says, you can use two <div> to apply the filter only to the second one. To work, you must use the z-index , which tells the element how deep it should be, leaving the div with the background image to show the rest of the elements.

Problems with this implementation:

Requires absolute positioning of both, with the same width and height, if you try to set width / height = 100% it will extend to the next non-static element (the browser window).

Otherwise, the secondary <div> ignores all content at the time of positioning and applying the filter.

#row-row
{
z-index:1;
width:300px;
height:300px;
top:0;
left:0;
overflow:hidden;
position: absolute;
color:white;
border: 1px solid red;
}

#fight-the-power{
z-index:-1;
width:300px;
height:300px;
top:0;
left:0;
background-image:url('https://www.gravatar.com/avatar/6402bed98d1b9576a4d584e0ff8d61a4?s=48&d=identicon&r=PG&f=1');
position:absolute;
filter:brightness(0.5);
}

<div id='row-row'>
Este texto no está afectado.
  <div id='fight-the-power' ></div>
  <br />
   Ni este input:
   <br />
   Mi super input <input /> 
   <br />
   Ni este botón
   <input type='button' value='Pulsa'/>
</div>