imagem CSS
Este capítulo irá mostrar como imagem do layout CSS para usar.
filé Fotos
miniaturas
Usamos a border propriedade para criar miniaturas.
Exemplos
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
<Img src = "paris.jpg" alt = "Paris">
tente »
Exemplos
display: inline-block;
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
transição: 0.3s;
}
a: hover {
box-shadow: 0 0 2px 1px rgba
(0, 140, 186, 0,5);
}
<A Href = "paris.jpg">
<Img src = "paris.jpg" alt = "Paris">
</ A>
tente »
imagem Responsive
imagem Responsive vai caber automaticamente uma variedade de tamanhos de tela.
Exemplo, você pode redefinir seu navegador para ver o tamanho do efeito:
Se você precisa de liberdade para dimensionar a imagem, ea imagem para ampliar o tamanho não maior do que o valor máximo do original, você pode usar o seguinte código:
Dica: o conteúdo da Web pode ser mais responsivas referência de design CSS tutoriais de design responsivo .
picture Text
Como localizar o texto da imagem:
Exemplos
tente:
O canto superior esquerdo >> canto superior direito » canto inferior esquerdo» canto inferior direito >> Centro >>Cartão-imagem
Exemplos
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba (0, 0, 0, 0,2), 0 6px 20px 0 rgba (0, 0, 0, 0,19);
}
img {width: 100%}
div.container {
text-align: center;
padding: 10px 20px;
}
tente »
filtros de imagem
O CSS filter de atributo para adicionar elementos com efeitos visuais (por exemplo: distorcido e saturação).
Nota: Internet Explorer ou Safari 5.1 (e versões anteriores) não suporta esta propriedade.
Exemplos
Editar todas as cores em imagens a preto e branco (100% cinza):
-webkit-filtro: tons de cinza (100% ); / * Chrome, Safari, Opera * /
Filtro: escala de cinza (100%);
}
tente »
Dica: Visite o CSS manual de filtros de referência para mais conteúdo.
Galeria de Imagens Responsive
Exemplos
padding: 0 6px;
float: left;
width: 24,99999%;
}
@media única tela e (max-width : 700px) {
.responsive {
width: 49,99999%;
margin: 6px 0;
}
}
@media única tela e (max-width : 500px) {
.responsive {
width: 100%;
}
}
tente »
Pictures Modal (modal)
Este exemplo demonstra como se combinam CSS e JavaScript para processar a imagem.
Primeiro, usamos CSS para criar uma janela modal (de diálogo), está oculta por padrão.
Em seguida, usamos JavaScript para exibir uma janela modal quando clique, a imagem será exibida em uma janela pop-up:
Exemplos
var modal = document.getElementById ( 'myModal' );
// Obter o modo de quadro de imagem, atributos alt da imagem, conforme descrito no presente pop chinês
var img = document.getElementById ( 'MyIMG' );
var modalImg = document.getElementById ( "img01" );
var CaptionText = document.getElementById ( "caput" );
img.onclick = function () {
modal.style.display = "bloco";
modalImg.src = this.src;
modalImg.alt = this.alt;
captionText.innerHTML = this.alt;
}
// Obter o elemento <span> que fecha o modal
var extensão = document.getElementsByClassName ( "close" ) [0];
// Quando o usuário clica em <span > (x), fechar o modal
span.onclick = function () {
modal.style.display = "none";
}
tente »