Css Blur Сделать фоновое содержимое менее видимым - PullRequest
Новая
       26

Css Blur Сделать фоновое содержимое менее видимым

0 голосов
/ 20 сентября 2018

Я пытаюсь создать CSS-оверлей, используя фильтр размытия.

#container {
  position: relative;
  height: 500px;
  width: 500px;
}

#content {
  color: #fff;
}

button {
  background-color: #fff;
  border-radius: 3px;
  box-sizing: border-box;
  color: #000;
  cursor: pointer;
  font-size: 14pt;
  font-weight: 700;
  padding: .75em 3.75em;
}

#content-not-blurred {
  color: #fff;
}

#overlay {
  top:0;
  left:0;
  right:0;
  bottom:0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: -1;
  color: rgba(209, 206, 209, 0.9);
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), #000, rgba(0, 0, 0, .5));
  filter: url('#blur');
  filter: blur(5px);
}
<div id="container">
  <div id="overlay">
    <div id="content">
      <p>I'm mr. myseeks</p>
      <button>I want feedback</button>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </div>
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <defs>
        <filter id="blur">
          <feGaussianBlur stdDeviation="5" />
        </filter>
      </defs>
    </svg>
  <div id="content-not-blurred">
    <p>Look at me!</p>
  </div>
</div>

Я создал пример в этом коде:

https://codepen.io/hetzbr/pen/zJLEaz

Когда у меня белая кнопка в качестве содержимого, этоочень заметный и трудный для чтения любой контент, который накладывается на размытие.

Можно ли сделать цвета контента менее заметными?

Я знаю, что могу добавить непрозрачность к контенту, чтобы сделать фоновое содержимое менее видимым, но любопытно, если есть способ, чтобы текст все еще мог иметь хороший эффект размытия, если кнопки не торчат, как больной большой палец.

Ответы [ 2 ]

0 голосов
/ 20 сентября 2018

Вы можете добавить фильтр brightness(50%); в дополнение к blur, чтобы затемнить размытый элемент, создавая немного больше контраста с белым текстом. 

#container {
  position: relative;
  height: 500px;
  width: 500px;
}

#content {
  color: #fff;
}

button {
  background-color: #fff;
  border-radius: 3px;
  box-sizing: border-box;
  color: #000;
  cursor: pointer;
  font-size: 14pt;
  font-weight: 700;
  padding: .75em 3.75em;
}

#content-not-blurred {
  color: #fff;
}

#overlay {
  top:0;
  left:0;
  right:0;
  bottom:0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: -1;
  color: rgba(209, 206, 209, 0.9);
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), #000, rgba(0, 0, 0, .5));
  filter: url('#blur') brightness(50%);
  filter: blur(5px) brightness(50%);
}
<div id="container">
  <div id="overlay">
    <div id="content">
      <p>I'm mr. myseeks</p>
      <button>I want feedback</button>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </div>
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <defs>
        <filter id="blur">
          <feGaussianBlur stdDeviation="5" />
        </filter>
      </defs>
    </svg>
  <div id="content-not-blurred">
    <p>Look at me!</p>
  </div>
</div>
0 голосов
/ 20 сентября 2018

Вы можете добавить непрозрачность только для кнопок.Таким образом, у вас все равно будут правильные цвета на контейнере, но кнопки будут выделяться меньше.

В вашем CodePen я добавил opacity: .5 do your button, и это, похоже, помогло.

Ваш пример с кнопками с низкой непрозрачностью

...