¿Usar imagen de borde solo para el borde inferior? Nuestro CSS parece replicar la imagen en todo el div en su lugar

Nos gustaría utilizar una imagen solo para la parte inferior de un DIV. Sin embargo, nuestro CSS de alguna manera reproduce la imagen en todo el cuerpo del DIV en lugar de colocarlo en la parte inferior.¿Usar imagen de borde solo para el borde inferior? Nuestro CSS parece replicar la imagen en todo el div en su lugar

¿Qué estamos haciendo mal?

Solo necesitamos compatibilidad con Safari móvil.

Ejemplo: http://jsfiddle.net/ZwnF8/

Código:

<div></div> 

div { background:gray; 
     width:100px; 
     height:100px; 
     margin-left:20px; 
     -webkit-border-image:url(http://www.panabee.com/images/dumpling/footer_list.png) 0 0 8 0 round 
    }

Fuente

2012-04-15 Crashalot

Método 1: conjunto 0 ancho (excepto ABAJO):

border-image:url("http://example.com/image1.png"); 
border-top:0; 
border-left:0; 
border-right:0;

Método 2: con style.css, crear ::AFTER phseudo-elemento:

.yourDiv::after {height:20px; width:100%; background:url("http://example.com/image1.png");}

Fuente

2015-05-20 08:46:03

Trate webkit-border-bottom-imagen con. No olvides incluir navegadores que no sean webkit. He aquí un enlace útil: http://css-tricks.com/understanding-border-image/

Fuente

2012-04-15 17:41:41 gabitzish

Desde su enlace: se supone que el comportamiento predeterminado es descartar la sección central de la imagen y usar la palabra clave 'fill' en la propiedad border-image-slice para conservarla: La palabra clave 'fill', si está presente , hace que se preserve la parte central de la imagen de borde. (De manera predeterminada, se descarta, es decir, se trata como vacío.) Pero el comportamiento actual del navegador es preservar el medio, y no hay forma de desactivarlo. Por lo tanto, si no desea que el área de contenido de su elemento tenga un fondo, la sección central de su imagen debe estar vacía. – Stefan

@gabitzish, -webkit-border-bottom-image no funcionó para nosotros ... ¿lo hizo por usted? – Crashalot

No sé sobre Safari móvil, sino que mató a la parte fronteriza de la CSS en el violín y poner esta por debajo de su div:

<div></div><img src="http://www.panabee.com/images/dumpling/footer_list.png" style="height:20px;width:100px;margin-left:20px;"/>

Y lo que hizo parece que quieres que lo haga ¿Safari Mobile no es compatible con algo como esto?

Fuente

2013-11-01 05:35:18 gNerb

que haya definido que se repita como "redondo": http://www.w3schools.com/cssref/css3_pr_border-image-repeat.asp

es como se puede definir cada atributo individual aquí:

div { background:gray; 
 
     width:100px; 
 
     height:100px; 
 
     margin-left:20px; 
 
     -webkit-border-image:url(http://www.panabee.com/images/dumpling/footer_list.png); 
 
     -webkit-border-image-width: 0 0 8px 0; 
 
     -webkit-border-image-repeat: stretch; 
 
     border-image: url(http://www.panabee.com/images/dumpling/footer_list.png); 
 
     border-image-width: 0 0 8px 0; 
 
     border-image-repeat: stretch; 
 
    }

Fuente

2015-04-20 20:51:13 Durthar

esto no funciona. – nihiser

esto se utiliza para poner la imagen de fronteras en la parte inferior de la div

 <html> 
     <head> 
      <style> 
      .target{ 
     height:100px; 
     width:100px; 
     border-image: url(Images/line.png) 0 0 5 0; 
     border-top: 0px; 
     border-left: 0px; 
     border-right: 0px; 
     border-bottom:8px; 
     } 
     </style> 
     </head> 
     <body> 
     <div class="target"> 

     </div> 
     </body> 
     </html>

Fuente

2015-11-12 08:12:42 yoga

mira esto jsfiddle.net/ocewa9sm/

#borderimg { 
background: #dfdfdf; 
padding: 15px; 
position: relative;} 

#borderimg:after { 
content: ""; 
border-bottom: 16px solid transparent; 
width: 100%; 
position: absolute; 
left: 0; 
bottom: -16px; 

-webkit-border-image: url(http://www.panabee.com/images/dumpling/footer_list.png); 
-o-border-image: url(http://www.panabee.com/images/dumpling/footer_list.png); 
border-image: url(http://www.panabee.com/images/dumpling/footer_list.png) ; 

border-image-slice: 8; 
border-image-width: 8px; 
border-image-outset: 0; 
border-image-repeat: stretch; 
}

Fuente

2017-02-20 11:42:29 ceren

Hay una forma más ... ": después de" elemento para poner una "imagen de fondo inferior absoluta" ... Pero no da un resultado saludable ... y mira estos enlaces https://css-tricks.com/ almanaque/properties/b/border-image/https://tympanus.net/codrops/css_reference/border-image-slice – ceren

¿Usar imagen de borde solo para el borde inferior? Nuestro CSS parece replicar la imagen en todo el div en su lugar

Respuesta

Cuestiones relacionadas