0
298
ViewsDesenfoque de fondo - CSS
Hola , trato de hacer que este fondo se desenfoque como esta imagen, así que me gustaría saber si puedo hacerlo usando solo CSS3 o si necesito usar Javascript y Jquery:
Y si usaré css solo Cómo hacer que el desenfoque sea receptivo.
Aquí mi código simple:
#bg{ background-image: url('http://store6.up-00.com/2017-03/149079039538851.jpg'); background-repeat: no-repeat; background-size: cover; } #bg { background-position: center top; padding: 70px 90px 120px 90px; } #search-container { position: relative; } #search-bg { /* Absolutely position it, but stretch it to all four corners, then put it just behind #search's z-index */ position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: 99; /* Pull the background 70px higher to the same place as #bg's */ /*background-position: center -70px;*/ -webkit-filter: blur(10px); filter: blur(10px); } #search { position: relative; z-index: 100; padding: 20px; background: rgba(34,34,34,0.75); } #search h2{ color:#ffffff; } <div id="bg"> <div id="search-container"> <div id="search-bg"></div> <div id="search"> <h2>Hello World</h2> </div> </div> </div>2 answers
Answer question0
Para desenfocar todo el fondo
No puede adjuntar fácilmente un efecto a una imagen de fondo. Debes desenfocarlo con un software y configurarlo como imagen de fondo.
Puede tener un fondo borroso en css con un div colocado detrás del contenido de su sitio y desenfocar este div así: http://codepen.io/aniketpant/pen/DsEve
<div class="background-image"></div> <div class="content"> Your text </div>Desenfoque detrás de un elemento
Puede obtener este resultado con el filtro de fondo CSS3:
0
puedes usar background-attachment:fixed; y configúrelo también en el contenedor borroso, background-attachment está ahí para configurar ambos bg en el mismo lugar, uno puede ser borroso.
ejemplo con un pseudo en lugar de div extra:
#bg { background-image: url('http://store6.up-00.com/2017-03/149079039538851.jpg'); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: center top; padding: 70px 90px 120px 90px; } #search-container { position: relative; } #search-container:before {/* add same bg-image with same backgrounds values to match main container */ content: ''; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: 0; background-image: url('http://store6.up-00.com/2017-03/149079039538851.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center top; background-attachment: fixed;/* make it match #bg position and size */ -webkit-filter: blur(5px); filter: blur(5px); } #search { position: relative; z-index: 1; padding: 20px; background: rgba(34, 34, 34, 0.5); display:flex; } #search h2 { color: #ffffff; margin:auto; } <div id="bg"> <div id="search-container"> <div id="search"> <h2>Hello World</h2> </div> </div> </div> 