Я пытаюсь создать наложение 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
Bhetzie 20 Сен 2018 в 03:41

2 ответа

Лучший ответ

Вы можете добавить фильтр 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>
3
Tyler Roper 20 Сен 2018 в 00:53

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

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

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

1
pnkwtrmln 20 Сен 2018 в 00:44