1

Как на плитках сделать эффект матового стекла?
Т.е. чтобы blur срабатывал только на область, которая находится за плиткой.
На цвет не обращайте внимания.

В коде выглядит так: в коде выглядит так

2

3 ответа 3

1

Эффект матового стекла достигается таким методом:

  1. Блоку, который содержит основной фон, добавить свойство background со значением fixed — чтобы потомки наследовали координаты этого фона корректно.
  2. Добавить свойство background: inherit блоку, который будет матовым — таким образом мы наследуем фон родителя
  3. Добавить ему свойство overflow: hidden — так мы обрежем размытие, которое выйдет за границы этого блока.
  4. Добавить filter: blur() — собственно, размытие.

    4.1. Для охвата большего количества поддерживаемых браузеров добавить SVG-фильтр и подключить его через CSS.

.background {
  width: 660px;
  height: 371px;
  background: url(http://ichef-1.bbci.co.uk/news/660/cpsprodpb/A2E4/production/_89400714_gettyimages-522829204.jpg) no-repeat fixed;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}

.noise {
  background: rgba(0,0,0,0.2);
  width: 170px;
  height: 170px;
  position: relative;
  background: inherit;
  overflow: hidden;
  filter: blur(10px);
  filter: url(#blur-filter);
}
<div class="background">
  <div class="noise"></div>
  <div class="noise"></div>
  <div class="noise"></div>
  <div class="noise"></div>
  <div class="noise"></div>
  <div class="noise"></div>
</div>

<svg version="1.1" xmlns='http://www.w3.org/2000/svg'>
 <filter id="blur-filter">
   <feGaussianBlur stdDeviation='10' />
   </filter>
</svg>

Минус этого метода в том, что при скролле фон остается на месте.

1

Это эффект который ожидается ?

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

.parent {
  width: 100%;
  height: 100%;
  background-color: rgba(200, 200, 200, .3);
  position: relative;
}

.blur {
  width: 100%;
  height: 100%;
  background-color: rgba(128, 183, 186, .4);
  background-image: url(http://www.hlgjyl888.com/data/wallpapers/189/WDF_2273934.jpeg);
  background-size: 100% 100%;
  filter: blur(5px);
  position: absolute;
  top: 0;
  left: 0;
}

.items {
  width: 100%;
  height: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: rgba(255, 255, 255, .1);
  display: flex;
  justify-content: space-around;
}

.item {
  width: 30%;
  height: 100%;
  text-align: center;
}

.item img {
  display: block;
  width: 100%;
  height: 100%;
  margin: auto;
}
<div class="parent">
  <div class="blur"></div>
  <div class="items">
    <div class="item">
      <img src="http://easywebscripts.net/wp-content/uploads/2009/07/jquery-icon.png">
    </div>
    <div class="item">
      <img src="http://s1.iconbird.com/ico/0512/BrushedMetalIcons/file1336753437.png">
    </div>
    <div class="item">
      <img src="http://logo-load.com/uploads/posts/2016-09/javascript-logo.png">
    </div>
  </div>
</div>

Или такой эффект blur() ?

* {
  margin: 0;
  padding: 0;
}

html,
body,
.wrapper {
  width: 100%;
  height: 100%;
  background-color: #ccc;
}

.wrapper {
  position: relative;
}

.background {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url(http://www.hlgjyl888.com/data/wallpapers/189/WDF_2273934.jpeg);
  background-size: 100% 100%;
  z-index;
  90;
}

.blur {
  width: 100%;
  height: 50%;
  background-image: url(http://www.hlgjyl888.com/data/wallpapers/189/WDF_2273934.jpeg);
  background-size: 100% 140%;
  background-position: 0 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 100;
  filter: blur(2px);
}

.items {
  width: 100%;
  height: 50%;
  background-color: rgba(255, 255, 255, .1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 120;
  display: flex;
  justify-content: space-around;
}

.item {
  width: 30%;
  height: 100%;
  text-align: center;
}

.item img {
  display: block;
  width: 100%;
  height: 100%;
  margin: auto;
}
<div class="wrapper">
  <div class="background"></div>
  <div class="blur"></div>
  <div class="items">
    <div class="item">
      <img src="http://easywebscripts.net/wp-content/uploads/2009/07/jquery-icon.png">
    </div>
    <div class="item">
      <img src="http://s1.iconbird.com/ico/0512/BrushedMetalIcons/file1336753437.png">
    </div>
    <div class="item">
      <img src="http://logo-load.com/uploads/posts/2016-09/javascript-logo.png">
    </div>
  </div>
</div>

1

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

Минус этого метода в использовании JS.

var noiseElements = [].slice.call(document.querySelectorAll('.noise'));

noiseElements.forEach(function(item) {
  item.style.backgroundPosition = -item.offsetLeft + 'px ' + item.offsetTop + 'px';
});
.background {
  width: 660px;
  height: 371px;
  background: url(http://ichef-1.bbci.co.uk/news/660/cpsprodpb/A2E4/production/_89400714_gettyimages-522829204.jpg) no-repeat;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  position: relative;
}

.noise {
  width: 170px;
  height: 170px;
  position: relative;
  background-image: inherit;
  overflow: hidden;
  filter: blur(10px);
  filter: url(#blur-filter);
}

svg {
  display: none;
}
<div class="background">
  <div class="noise"></div>
  <div class="noise"></div>
  <div class="noise"></div>
  <div class="noise"></div>
  <div class="noise"></div>
  <div class="noise"></div>
</div>

<svg version="1.1" xmlns='http://www.w3.org/2000/svg'>
 <filter id="blur-filter">
   <feGaussianBlur stdDeviation='10' />
   </filter>
</svg>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.