1

Quería saber si hay alguna forma de crear imagenes automaticas en algun lenguaje, ya sea php o javascript, (o tambien css). La verdad no se con cual sería.

Explicación: Tener una plantilla de la imagen de fondo, y adentro de ese fondo poner una imagen otra imagen. Por ejemplo: Un fondo de color rojo, y adentro de ese fondo o imagen poner unos escudos de equipos.

Y también si se puede guardar cierta imagen una vez que se haya creado la imagen.

Se entiende la idea? Esto sería para no editar las fotos en photoshop y subirlas al hosting y demás, con esto, subiría los escudos y el fondo, y lo demás sería el código.

1
  • 1
    la forma mas facil seria usar imagenes .png con fondo transparente y luego ponerles un color de fondo ya con html Commented el 24 jul. 2018 a las 21:33

1 respuesta 1

1

La forma más práctica de lograr lo que te propones es usar imágenes png con fondo transparente, al momento de mostrarlas las puedes usar en un <div> o directamente en un <img> y simplemente cambias el color de fondo con css.

Puedes leer más sobre la propiedad de fondo de imagen en la w3schools


Ejemplo poniendo las imágenes como fondo de un div

#barcelona-rojo {
    background: url("https://vignette.wikia.nocookie.net/proevolutionsoccer/images/0/0e/Barcelona.png/revision/latest?cb=20151214164102&path-prefix=es");
    height: 200px;
    width: 200px;
    background-color: red;
    background-repeat: no-repeat;
    background-size: cover;
}

#barcelona-gris {
    background: url("https://vignette.wikia.nocookie.net/proevolutionsoccer/images/0/0e/Barcelona.png/revision/latest?cb=20151214164102&path-prefix=es");
    height: 200px;
    width: 200px;
    background-color: gray;
    background-repeat: no-repeat;
    background-size: cover;
}

#realmadrid-gold {
    background: url("https://vignette.wikia.nocookie.net/realmadrid/images/a/a2/Escudo.png/revision/latest?cb=20071129200831");
    height: 200px;
    width: 200px;
    background-color: gold;
    background-repeat: no-repeat;
    background-size: cover;
}

#realmadrid-black {
    background: url("https://vignette.wikia.nocookie.net/realmadrid/images/a/a2/Escudo.png/revision/latest?cb=20071129200831");
    height: 200px;
    width: 200px;
    background-color: black;
    background-repeat: no-repeat;
    background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h4>Barcelona con fondo rojo</h4>
<div id="barcelona-rojo"></div>

<h4>Barcelona con fondo gris</h4>
<div id="barcelona-gris"></div>

<h4>Real Madrid con fondo dorado</h4>
<div id="realmadrid-gold"></div>

<h4>Real Madrid con fondo negro</h4>
<div id="realmadrid-black"></div>

</body>
</html>


Ejemplo mostrando las imágenes directamente

#barcelona-rojo {
    width: 200px;
    background-color: red;
}

#barcelona-gris {
    width: 200px;
    background-color: gray;
}

#realmadrid-gold {
    width: 200px;
    background-color: gold;
}

#realmadrid-black {
    width: 200px;
    background-color: black;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h4>Barcelona con fondo rojo</h4>
<img id="barcelona-rojo" src="https://vignette.wikia.nocookie.net/proevolutionsoccer/images/0/0e/Barcelona.png/revision/latest?cb=20151214164102&path-prefix=es">

<h4>Barcelona con fondo gris</h4>
<img id="barcelona-gris" src="https://vignette.wikia.nocookie.net/proevolutionsoccer/images/0/0e/Barcelona.png/revision/latest?cb=20151214164102&path-prefix=es">

<h4>Real Madrid con fondo dorado</h4>
<img id="realmadrid-gold" src="https://vignette.wikia.nocookie.net/realmadrid/images/a/a2/Escudo.png/revision/latest?cb=20071129200831">

<h4>Real Madrid con fondo negro</h4>
<img id="realmadrid-black" src="https://vignette.wikia.nocookie.net/realmadrid/images/a/a2/Escudo.png/revision/latest?cb=20071129200831">

</body>
</html>


como verás ambos resultados son parecidos, pero se adpatarían según lo que necesites

8
  • Gracias, parece que me sirve, tengo una duda más, en el ejemplo uno la imagenes no se puede arrastrar, cosa que en el ejemplo dos no pasa, cual es la funcion css que hace eso?
    – MatiPHP
    Commented el 24 jul. 2018 a las 22:13
  • La diferencia radica en que para el primer ejemplo las imagenes las pone como fondo de un elemento <div>, al estar como fondo no se pueden arrastrar; en el segundo se muestran como la fuente de una etiqueta <img> que las muestra directamente y es por eso que las puedes arrastrar, guardar, etc Commented el 24 jul. 2018 a las 22:20
  • Y con la etiqueta <img> no se puede evitar que se arrastre?
    – MatiPHP
    Commented el 24 jul. 2018 a las 22:31
  • si, si se puede, usando javascript, este post te puede servir stackoverflow.com/questions/4211909/…. o formula una nueva pregunta Commented el 24 jul. 2018 a las 22:35
  • Listo, gracias, edité la pregunta con un nuevo tema, para no formular otra con el mismo tema.
    – MatiPHP
    Commented el 24 jul. 2018 a las 22:50

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.