Usa l'immagine del bordo solo per il bordo inferiore? Il nostro CSS sembra replicare l'immagine sull'intero div anziché

Vorremmo usare un'immagine solo per il fondo di un DIV. Tuttavia, il nostro CSS in qualche modo replica l'immagine attraverso il corpo del DIV invece di posizionarlo in basso.Usa l'immagine del bordo solo per il bordo inferiore? Il nostro CSS sembra replicare l'immagine sull'intero div anziché

Cosa stiamo sbagliando?

Abbiamo solo bisogno di supportare Safari mobile.

Esempio: http://jsfiddle.net/ZwnF8/

Codice:

<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 
    }

fonte

2012-04-15 Crashalot

Metodo 1: set Larghezza 0 (tranne BOTTOM):

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

Metodo 2: con style.css, crea ::AFTER phseudo-elemento:

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

fonte

2015-05-20 08:46:03

Prova -webkit-border-bottom-image con. Non dimenticare di includere i browser non Webkit. Ecco un link utile: http://css-tricks.com/understanding-border-image/

fonte

2012-04-15 17:41:41 gabitzish

Dal link: il comportamento predefinito dovrebbe essere quello di eliminare la sezione centrale dell'immagine e utilizzare la parola chiave 'fill' sulla proprietà border-image-slice per conservarla: La parola chiave 'fill', se presente , fa sì che la parte centrale dell'immagine del bordo sia preservata. (Di default è scartato, cioè trattato come vuoto.) Ma il comportamento corrente del browser è quello di preservare il mezzo e non c'è modo di disattivarlo. Pertanto, se non vuoi che l'area del contenuto dell'elemento abbia uno sfondo, la sezione centrale dell'immagine deve essere vuota. – Stefan

@gabitzish, -webkit-border-bottom-image non ha funzionato per noi ... l'ha fatto per te? – Crashalot

Non so su Safari Mobile, ma ho ucciso la parte bordo del vostro css sul violino e mettere questo sotto il div:

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

E lo ha fatto quello che sembra che tu lo voglia. Safari mobile non supporta qualcosa di simile?

fonte

2013-11-01 05:35:18 gNerb

Hai definito a ripetere come "giro": http://www.w3schools.com/cssref/css3_pr_border-image-repeat.asp

Ecco come si può definire ogni singolo attributo:

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; 
 
    }

fonte

2015-04-20 20:51:13 Durthar

questo non funziona. – nihiser

questo è usato per inserire l'immagine confine sul fondo del 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>

fonte

2015-11-12 08:12:42 yoga

guarda questo 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; 
}

fonte

2017-02-20 11:42:29 ceren

C'è un altro modo .. ": dopo" elemento per mettere "un'immagine di fondo in fondo assoluta" .. Ma non dà un risultato salutare .. e guarda questi link https://css-tricks.com/ almanacco/proprietà/b/border-image/https://tympanus.net/codrops/css_reference/border-image-slice – ceren

Usa l'immagine del bordo solo per il bordo inferiore? Il nostro CSS sembra replicare l'immagine sull'intero div anziché

risposta

Problemi correlati