2

Quiero poner un background que se mueva con un estilo slider, y que tenga cierta opacidad para que el contenido principal se pueda notar perfectamente, habria una forma en codigo claro, de hacerlo?

he intentado con javascript y css pero nada me ha resultado.

1 respuesta 1

1

vi este codigo por alli

html, body {
  margin: 0; padding: 0;
}

.slider-wrap {
  width: 100%;
  height:600px;
  position: relative;
}
.single-slide {
  width: 100%;
    height: 100%;
    position: absolute;
  opacity: 0;
animation: slider-animation;
animation-duration: 25s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
  background-size: cover;
}

#slide-1 {background-color: red; background-image: url(https://images7.alphacoders.com/391/391001.jpg);}
#slide-2 {background-color: rebeccapurple; animation-delay: 5s; background-image: url(https://images5.alphacoders.com/426/426029.jpg);}
#slide-3 {background-color: orange; animation-delay: 10s; background-image: url(http://www.amazingwallpaperz.com/wp-content/uploads/Ice-Cream-Wallpapers-For-Laptops.jpg);}
#slide-4 {background-color: blue; animation-delay: 15s; background-image: url(http://wallpapersdsc.net/wp-content/uploads/2015/11/Ice_Cream_Iphone_wallpapers14.jpg);}
#slide-5 {background-color: green; animation-delay: 20s; background-image: url(http://kingofwallpapers.com/ice-cream-wallpaper/ice-cream-wallpaper-015.jpg);}

@keyframes slider-animation {
    
0% {
    opacity: 0;
}
6% {
    opacity: 1;
}
24% {
    opacity: 1;
}
30% {
    opacity: 0;
}
100% {
    opacity: 0;
}
}
<div class="slider-wrap">
  <div class="single-slide" id="slide-1"></div>
  <div class="single-slide" id="slide-2"></div>
  <div class="single-slide" id="slide-3"></div>
  <div class="single-slide" id="slide-4"></div>
  <div class="single-slide" id="slide-5"></div>
  
</div>

4
  • Esto funciona, claro, pero dentro de el div con la clase slider-wrap, en mi caso quiero que sea toda la pagina que tenga el background, osea en el body. Commented el 3 jul. 2018 a las 0:54
  • por lo que entiendo la propiedad opacity es lo que le da transparencia a una imagen, coloca esa propiedad en el body
    – Tumund0
    Commented el 3 jul. 2018 a las 1:03
  • Si lo hace, pero como te imaginaras, le daria un opacity a todos los elementos incluyendo menus, contenido, etc... Commented el 3 jul. 2018 a las 1:27
  • stackoverflow.com/questions/5662178/…
    – Tumund0
    Commented el 3 jul. 2018 a las 1:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.