Início / computer / Perguntas / 1479478
Accepted
thanoschimichan-ga
Asked: 2019-09-06 18:54:51 +0800 CST

Como adicionar atributos à imagem de fundo alterada em HTML/JavaScript?

  • 772

Estou tentando descobrir como posso criar uma função que permita ao usuário definir sua própria imagem de plano de fundo no meu site por meio do URL da imagem que ele insere. A princípio este era o meu código:

<a href="#" onclick="funcBgImage()"><img src="example.com/example-image-url.png" height=50, width=50></img></a>


<script>
function funcBgImage() {
var imageurl = prompt("Enter Image URL",
"");
            if (imageurl != null) { 
            document.body.style.background = "url('" + imageurl + "')"
}


}
</script>

E funciona! Mas aqui está o problema:

Toda vez que você definir a imagem como algo muito grande ou muito pequeno, ela simplesmente se repetirá e não se centralizará e nem se redimensionará. Eu tentei corrigi-lo com este código:

            if (imageurl != null) { 
            document.body.style.background = "url('" + imageurl + "');background-repeat:no-repeat;background-size:cover;"

Mas isso fez com que o código não definisse um plano de fundo, então não funcionou.

Qualquer ajuda? Eu realmente preciso descobrir isso.

html images

1 respostas

  1. Best Answer

    Eu tentei o seu código e encontrei alguns problemas. Sempre que você der estilo usando javaScript, nesse caso você deve escrever document.body.style e depois seu atributo. Com isso, você pode adicionar vários estilos. Você pode usar o código a seguir e funciona!

    <a href="#" onclick="funcBgImage()"><img src="example.com/example-image-url.png" height=500, width=500></img></a>
<script>
    function funcBgImage() {
        var imageurl = prompt("Enter Image URL", "");
        if (imageurl != null) {
            document.body.style.background = "url('" + imageurl + "')";
            document.body.style.backgroundRepeat = "no-repeat";
            document.body.style.backgroundSize = "cover";
        }
    }
</script>
    • 0

relate perguntas