Вопросы Теги

Blur & lt; div & gt; фон без фонового изображения [дубликат]

Вам нужны указатели или ссылки, потому что для типа полиморфизма, который вас интересует (*), вам нужно, чтобы динамический тип мог отличаться от статического типа, другими словами, что истинный тип объекта отличается от объявленный тип. В C ++, который происходит только с указателями или ссылками.

(*) Обобщение, тип полиморфизма, предоставляемого шаблонами, не нуждается в указателях и ссылках.

2
задан Jamie Bonnett 20 February 2018 в 15:39
поделиться

3 ответа

Обходной путь заключается в том, чтобы использовать клип-путь, фильтр и одно и то же содержимое дважды, тогда вы получите тот же результат, что и фоновый фильтр 

.container {
  width: 200px;
  height: 200px;
  position: relative;
  padding:1px;
}
.container .glass, .container .filter {
  background: url('https://lorempixel.com/400/200/') center/cover;
  text-align:center;
  color:#fff;
  height:100%;
}

.filter {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  filter: contrast(4) blur(3px);
  z-index: 2;
  clip-path: polygon(5% 15%, 82% 30%, 83% 71%, 17% 73%);
}
<div class="container">
  <div class="glass">
    <h1>A title</h1>
    <p>Some content Some content</p>
  </div>
  <div class="filter">
    <h1>A title</h1>
    <p>Some content Some content</p>
  </div>
</div>

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

$('.backdrop').each(function() {
  var e = $(this).html();
  $(this).append('<div class="filter">'+e+'</div>');
})
.container {
  width: 200px;
  height: 200px;
  position: relative;
  padding:1px;
  display:inline-block;
}
.container .glass, .container .filter {
  background: url('https://lorempixel.com/400/200/') center/cover;
  text-align:center;
  color:#fff;
  height:100%;
}

.filter {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  filter: contrast(4) blur(3px);
  z-index: 2;
  clip-path: polygon(5% 15%, 82% 30%, 83% 71%, 17% 73%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container backdrop">
  <div class="glass">
    <h1>A title</h1>
    <p>Some content Some content</p>
  </div>
</div>
<div class="container">
  <div class="glass">
    <h1>A title</h1>
    <p>Some content Some content</p>
  </div>
</div>

3
ответ дан Temani Afif 16 August 2018 в 14:31
поделиться
  • 1
    Это не будет работать для динамического содержания подложки. Я обновляю свой пост, чтобы показать вам, что я имею в виду. – Jamie Bonnett 20 February 2018 в 15:38
  • 2
    @JamieBonnett это будет :), поскольку вы можете просто применить псевдоэлемент без клипа к контенту;) – Temani Afif 20 February 2018 в 15:39
  • 3
    Я попробую сейчас. – Jamie Bonnett 20 February 2018 в 15:41
  • 4
    @JamieBonnett ok i updated;) и я тоже работаю над другим – Temani Afif 20 February 2018 в 15:45
  • 5
    Спасибо, это работает! Хотя я не думаю, что буду использовать его, поскольку он будет использовать больше ресурсов и, возможно, замедлить приложение. Я действительно ценю вашу помощь: D – Jamie Bonnett 20 February 2018 в 16:03

Просто: filter 

filter: blur(10px);

Однако вам нужно немного изменить структуру. Вот пример: 

*{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}
main{
  height: 100vh;
  background: url('https://images.unsplash.com/photo-1477346611705-65d1883cee1e?dpr=0.800000011920929&auto=format&fit=crop&w=1199&h=800&q=80&cs=tinysrgb&crop=') fixed no-repeat;
  background-size: cover;
}
#container{
  width: 350px;
  height: 500px;
  background: inherit;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  margin-left: -175px;
  margin-top: -250px;
  border-radius: 8px;
}
#container:before{
  width: 400px;
  height: 550px;
  content: "";
  position: absolute;
  top: -25px;
  left: -25px;
  bottom: 0;
  right: 0;
  background: inherit;
  box-shadow: inset 0 0 0 200px rgba(255,255,255,0.2);
  filter: blur(10px);
}
form img{
  width: 120px;
  height: 120px;
  border-radius: 100%;
}
form{
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
input{
  background: 0;
  width: 200px;
  outline: 0;
  border: 0;
  border-bottom: 2px solid rgba(255,255,255, 0.3);
  margin: 20px 0;
  padding-bottom: 10px;
  font-size: 18px;
  font-weight: bold;
  color: rgba(255,255,255, 0.8);
}
input[type="submit"]{
  border: 0;
  border-radius: 8px;
  padding-bottom: 0;
  height: 60px;
  background: #df2359;
  color: white;
  cursor: pointer;
  transition: all 600ms ease-in-out;
}
input[type="submit"]:hover{
  background: #C0392B;
}
span a{
  color: rgba(255,255,255, 0.8);
}
<main>
<div id="container">
  <form action="">
    <input type="text" value=""><br>
    <input type="password"><br>
    <input type="submit" value="SIGN IN"><br>
    <span><a href="#">Forgot Password?</a></span>
  </form>
</div>
</main>

0
ответ дан DreamWave 16 August 2018 в 14:31
поделиться
  • 1
    Почему я был приглашен на рабочий пример? – DreamWave 20 February 2018 в 15:22
  • 2
    Поскольку ваш ответ отрывается как «использовать фильтр вместо фона-фильтра», который из контекста кажется глупым, поскольку весь point фона-фильтр должен применять фильтр только к определенной части элемента, а не все, что делает фильтр. Если ваш пример работает, тогда ваш ответ предлагает нечто совершенно иное, чем то, что показано в примере. Ответ должен говорить сам за себя и не требовать от читателя щелчка по ссылке, чтобы это имело смысл. – BoltClock♦ 20 February 2018 в 15:24
  • 3
    @BoltClock Я скопировал кодировщик внутри. Однако, согласно вашей логике, ответ «нет» должен быть ответом и должен быть принят, поскольку нет альтернативы фону-фильтру. Мы не здесь, чтобы решать проблемы людей, мы здесь, чтобы указать им в правильном направлении. Само по себе OP должен использовать «фильтр». Как использовать это еще одна тема, и это не очень хорошая практика для написания кода для него. – DreamWave 20 February 2018 в 15:32
  • 4
    Указание кого-то в правильном направлении «использовать фильтр на другом элементе для имитировать фоновый фильтр. & Quot; Простая установка «Использовать фильтр вместо фильтра заднего плана». в лучшем случае misdirection и заставляет вас (r ответ) выглядеть глупо в худшем случае. Вам не нужно писать код от чьего-либо имени, чтобы указать им в правильном направлении - все, что вам нужно, - это немного больше изложения, чтобы ваш ответ имел смысл. – BoltClock♦ 20 February 2018 в 15:35
  • 5
    @ Jonny: Потому что я был занят ответом в комментариях. Теперь я убрал вниз, когда он отредактировал его в форме. Возможно, вы захотите обратить внимание на отметки времени комментариев и редактирования - они есть по какой-то причине. – BoltClock♦ 20 February 2018 в 15:39

Попробуйте следующее: 

.glass:before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1;
  background: rgba(0,0,0,0.8);

  display: block;
  width:100%;
  height: 100%;

  -webkit-filter: blur(30px);
  -moz-filter: blur(30px);
  -o-filter: blur(30px);
  -ms-filter: blur(30px);
  filter: blur(30px);
}
0
ответ дан spriore 16 August 2018 в 14:31
поделиться