Размытый фон для модального окна входа

Я создаю приложение, в котором мне нужно иметь окно входа, фон которого прозрачен, так что отображается фоновое изображение <body>. Как и в LinkedIn:Размытый фон для модального окна входа

enter image description here

LinkedIn имеет размытый фон для этого входа в поле. Как в CSS я могу это достичь?

Вот что я пробовал, но он не работает.

background-color:ffffff; 
opacity:0.4 
margin-left:200px;

Может ли кто-нибудь отправить меня в правильном направлении?

источник

2014-08-28 user2619381

Что такое ссылка на эту страницу? Я попытался выйти из Linkedin, но я не вижу эту страницу. Я бы просто осмотрел элемент в Chrome, но я подозреваю, что ответ @Benjamin будет закрыт – lharby

Возможный дубликат [Прозрачный фон, но не содержимое (текст и изображения) внутри него, только в CSS?] (Http: // stackoverflow. com/questions/806000/transparent-background-but-not-the-content-text-images-in-it-in-css-on) –

Они используют фильтр [https://developer.mozilla.org/ de/docs/Web/CSS/filter) с ресурсом svg. который не поддерживается [http://caniuse.com/#search=filter] –

Пытались использовать фильтр (на данный момент работает только в WebKit)?

Проверьте это: http://davidwalsh.name/css-filters

(у меня нет времени, чтобы попробовать, но вы, возможно, придется положить два DIV, один с изображением и фильтр, а другой с формой)

К сожалению за мой английский :)

EDIT:

Я сделал это перо: http://codepen.io/anon/pen/gEmrD

HTML:

<div class="container"> 
    <div class="content"> 
    </div> 
    <div class="form"> 
    <p>This is you form (with a bit of immagination :P)</p> 
    </div> 
</div>

CSS:

.container { 
    width: 1000px; 
    height: 100%; 
    min-height: 500px; 
    background-image: url('http://www.gordonviaggi.it/files/wedding_packets/in_giro_per_san_francisco.jpeg'); 
    background-size: 1000px; 
    background-position: 50% 50%; 
    display: block; 
} 

.content { 
    width: 100%; 
    height: 300px; 
    margin: 0; 
    background-image: url('http://www.gordonviaggi.it/files/wedding_packets/in_giro_per_san_francisco.jpeg'); 
    background-size: 1000px; 
    background-position: 50% 0; 
    filter: blur(3px); 
    -webkit-filter: blur(3px); 
    display: block; 
} 

.form { 
    position: absolute; 
    top: 200px; 
    left: 250px; 
    width: 500px; 
    height: auto; 
    background-color: rgba(255,255,255,0.5); 
    color: #222; 
    display: block; 
}

источник

2014-08-28 16:10:44

Включая резюме связанных контент будет полезен, если веб-сайт недоступен или будет изменен. Я заметил, что в связанном блоге много примеров кода. Можете ли вы добавить наиболее релевантные ответы? – skrrgwasme

Thaks :) Я поставил код в свой анзавер –

@OmarEnricoPolo Выглядит отлично, кстати, в первом разделе есть дополнительный ';' в первом разделе – ctwheels

Вы должны попробовать background-color: rgba(255,255,255,0.5), который делает цвет фона прозрачным, тогда как opacity: 0.4 делает прозрачным даже контент.

См DEMO

источник

2014-08-28 16:08:20 Benjamin

На фоне тоже размывается. Я проверю его на консоли. – lharby

@ user2619381 этот [ответ] (http://stackoverflow.com/questions/20411257/css-blur-on-background-image-but-not-on-content) поможет вам размыть – Benjamin

Размытый фон для модального окна входа

ответ

Смежные вопросы