Bordo con texture

[theboss280489]

Salve a tutti,
avrei bisogno di creare un bordo per un elemento html (che sia per esempio una immagine, una tabella o un div) che sia solido ma abbia come riempimento non un colore ma una texture di cui posseggo una immagine.

La soluzione potrebbe essere quella di racchiudere l'immagine in un div con lo sfondo desiderato.
Ho tuttavia la necessità di mantenere trasparente (o riempito da un'altra immagine) lo spazio che l'immagine occupa in modo che si veda lo sfondo della pagina e non quello del bordo. (si veda l'esempio)

Devo inoltre avere la possibilità di scrivere nel bordo come riportato sempre nell'esempio.

La soluzione sarebbe quella di racchiudere tutto in un div con lo sfondo desiderato in modo da poter scrivere anche il titolo: esiste un metodo per "cancellare lo sfondo" del div contenitore ove sovrapposto dal div contenuto?

Qualcuno potrebbe darmi dei suggerimenti? Grazie

[deleted_20210415]

Salve a tutti,
avrei bisogno di creare un bordo per un elemento html (che sia per esempio una immagine, una tabella o un div) che sia solido ma abbia come riempimento non un colore ma una texture di cui posseggo una immagine.

La soluzione potrebbe essere quella di racchiudere l'immagine in un div con lo sfondo desiderato.
Ho tuttavia la necessità di mantenere trasparente (o riempito da un'altra immagine) lo spazio che l'immagine occupa in modo che si veda lo sfondo della pagina e non quello del bordo. (si veda l'esempio)

Devo inoltre avere la possibilità di scrivere nel bordo come riportato sempre nell'esempio.

La soluzione sarebbe quella di racchiudere tutto in un div con lo sfondo desiderato in modo da poter scrivere anche il titolo: esiste un metodo per "cancellare lo sfondo" del div contenitore ove sovrapposto dal div contenuto?

Qualcuno potrebbe darmi dei suggerimenti? Grazie

Ecco qui

[deleted_20210415]

Salve a tutti,
avrei bisogno di creare un bordo per un elemento html (che sia per esempio una immagine, una tabella o un div) che sia solido ma abbia come riempimento non un colore ma una texture di cui posseggo una immagine.

La soluzione potrebbe essere quella di racchiudere l'immagine in un div con lo sfondo desiderato.
Ho tuttavia la necessità di mantenere trasparente (o riempito da un'altra immagine) lo spazio che l'immagine occupa in modo che si veda lo sfondo della pagina e non quello del bordo. (si veda l'esempio)

Devo inoltre avere la possibilità di scrivere nel bordo come riportato sempre nell'esempio.

La soluzione sarebbe quella di racchiudere tutto in un div con lo sfondo desiderato in modo da poter scrivere anche il titolo: esiste un metodo per "cancellare lo sfondo" del div contenitore ove sovrapposto dal div contenuto?

Qualcuno potrebbe darmi dei suggerimenti? Grazie

http://jsfiddle.net/3Cz3h/

Ecco qui

[theboss280489]

Che cosa sarebbe? mi sembra un editor che fa vedere in tempo reale il risultato

[deleted_20210415]

Si, peccato che non abbia salvato e quello che ti mostra è tutta un'altra cosa.

Allora, partiamo dal presupposto che tu hai un elemento padre ed un elemento figlio, del tipo:

<div class="padre">
 <div class="figlio">
 </div>
</div>

E diamo anche per scontato che tu conosca le altezze esatte dei due elementi, con il figlio più piccolo (di 10 pixel) del padre, sia in larghezza che in lunghezza.

avresti una cosa del genere nel file di stile:

.padre {
   width: 310px;
   height: 310px;
   background:url(url della texture);
   float: left; //importantissimo
}

.figlio {
  width: 300px;
  height: 300px;
  background: //color o image che preferisci;
}

ora, come vedi, hai un div dentro un altro div, e sebbene ci siano spazi sia sotto che a destra del div figlio, che mostrano la texture, quest'ultimo non è ancora centrato.

Per farlo, devi assegnare al figlio la proprietà "margin-left", con la metà della differenza di grandezza tra il padre e il figlio, che ti ricordo essere di 10px, e successivamente, assegnare "margin-top" seguendo la stessa procedura.

Ecco il codice completo dell'esempio:

.padre {
   width: 310px;
   height: 310px;
   background:url(url della texture);
   float: left; //importantissimo
}

.figlio {
  width: 300px;
  height: 300px;
  margin-left: 5px;
  margin-right: 5px;
  background: //color o image che preferisci;
}

[theboss280489]

Si, peccato che non abbia salvato e quello che ti mostra è tutta un'altra cosa.

Allora, partiamo dal presupposto che tu hai un elemento padre ed un elemento figlio, del tipo:

<div class="padre">
 <div class="figlio">
 </div>
</div>

E diamo anche per scontato che tu conosca le altezze esatte dei due elementi, con il figlio più piccolo (di 10 pixel) del padre, sia in larghezza che in lunghezza.

avresti una cosa del genere nel file di stile:

.padre {
   width: 310px;
   height: 310px;
   background:url(url della texture);
   float: left; //importantissimo
}

.figlio {
  width: 300px;
  height: 300px;
  background: //color o image che preferisci;
}

ora, come vedi, hai un div dentro un altro div, e sebbene ci siano spazi sia sotto che a destra del div figlio, che mostrano la texture, quest'ultimo non è ancora centrato.

Per farlo, devi assegnare al figlio la proprietà "margin-left", con la metà della differenza di grandezza tra il padre e il figlio, che ti ricordo essere di 10px, e successivamente, assegnare "margin-top" seguendo la stessa procedura.

Ecco il codice completo dell'esempio:

.padre {
   width: 310px;
   height: 310px;
   background:url(url della texture);
   float: left; //importantissimo
}

.figlio {
  width: 300px;
  height: 300px;
  margin-left: 5px;
  margin-right: 5px;
  background: //color o image che preferisci;
}

Forse non è chiaro il problema...
ok arrivati a questo punto supponiamo di dare uno sfondo al padre (la nostra texture) il figlio viene al centro ma dove viene il figlio lo sfondo del padre deve essere trasparente. Se io al figlio do uno sfondo trasparente devo vedere lo sfondo sotto e non quello del padre... Chiaro ora?

[deleted_20210415]

Guarda qui allora...
Faccio prima a linkartelo che a spiegarlo: http://www.html.it/pag/19452/border-image/ (NO SPAM)

[theboss280489]

In questo modo non è possibile scrivere sul bordo