Como diminuir uma imagem em CSS

O escurecimento de uma imagem dificulta a visualização, mas esse pode ser apenas o efeito que você está procurando. Uma imagem escura torna-se menos proeminente em uma página da Web e chama menos atenção do que os objetos em torno dela. Você pode escurecer a imagem de uma praia ensolarada, por exemplo, para chamar o foco de um usuário para um menu abaixo da imagem. Você não precisa criar várias imagens para produzir esse efeito de escurecimento. Cascading Style Sheets, ou CSS, pode executar esse truque usando algumas linhas de código.

CSS

CSS é uma linguagem que os designers de sites usam para definir a aparência dos objetos em páginas da Web. Esses atributos, como cor e opacidade, têm valores conforme mostrado no exemplo a seguir: .redBorder {border-color: red; estilo de borda: sólido;}

Este código cria uma classe CSS chamada redBorder. Se uma das tags img de HTML fizer referência a essa classe, os visitantes do site verão uma borda vermelha sólida ao redor da imagem ao visualizá-la na sua página da Web. O código HTML que faz referência a essa classe é exibido da seguinte maneira e a borda vermelha pode ser removida removendo a referência de classe nessa tag img:

Opacidade CSS

Ao alterar a opacidade de uma imagem usando CSS, você a torna mais escura. O código mostrado abaixo cria uma classe chamada opacity40 que define valores de opacidade de 40%: .opacity40 {filter: alpha (opacity = 40);

opacidade: 0, 4; }

O atributo de filtro da classe usa uma escala de opacidade entre 0 e 100 e seu atributo de opacidade tem uma escala de opacidade com valores que variam de 0 a 1. Usar os dois atributos garante que todos os navegadores possam alterar a opacidade da sua imagem. Adicione esta referência de classe a uma imagem para torná-la fraca. Você também pode criar uma classe chamada "opacity100" e definir seus valores para que a opacidade da imagem seja 100 por cento. Essa aula tornaria a imagem opaca.

Diminuir programaticamente

Sua página da Web pode exibir uma imagem esmaecida quando os usuários abrirem a página, ou seu código pode fazer com que a imagem diminua mais tarde depois que a página for carregada. Para reduzir a imagem inicialmente, defina sua opacidade para um valor menor, conforme descrito anteriormente. Para escurecer a imagem enquanto seu aplicativo é executado, altere o nome da classe que define a opacidade da imagem, conforme mostrado no exemplo abaixo: var imageObject = document.getElementById ("image1"); imageObject.className = "opacity40";

Esse código, que aparece dentro de uma função JavaScript, obtém uma referência à imagem e altera seu nome de classe para "opacity40". Os usuários podem clicar em um botão que executa a função JavaScript ou seu código pode chamá-lo a qualquer momento.

Considerações

Sua função JavaScript precisa do valor id da imagem que você deseja escurecer se desejar alterar sua opacidade dinamicamente. O ID da imagem no exemplo descrito anteriormente é "image1". Se você tiver várias fotos para escurecer, forneça valores de identificação exclusivos e passe-os para a função que realiza a alteração de opacidade. Crie quantas classes CSS quiser e defina diferentes graus de opacidade. Você pode então escurecer uma imagem em qualquer grau, alterando sua referência de classe na função JavaScript.