Uma coleção de métodos possíveis para definir imagens de CSS
Pseudoelemento do CSS2:after ou a sintaxe mais recente::after do CSS3, juntamente com a content:propriedade:
Primeira recomendação do W3C: folhas de estilo em cascata, nível 2 Especificação CSS2 12 de maio de 1998
Última recomendação do W3C: seletores Nível 3 Recomendação do W3C 29 de setembro de 2011
Esse método anexa conteúdo logo após o conteúdo da árvore de documentos de um elemento.
Nota: alguns navegadores experimentalmente renderizam a contentpropriedade diretamente sobre alguns seletores de elementos, desconsiderando até a recomendação mais recente do W3C que define:
Aplica-se a: :beforee :afterpseudoelementos
Sintaxe CSS2 (compatível com a frente):
.myClass:after {
content: url("somepicture.jpg");
}
Seletor CSS3:
.myClass::after {
content: url("somepicture.jpg");
}
Renderização padrão: tamanho original (não depende da declaração explícita de tamanho)
Esta especificação não define completamente a interação de: before e: after com elementos substituídos (como IMG em HTML). Isso será definido em mais detalhes em uma especificação futura.
mas mesmo no momento da redação deste texto, o comportamento com uma <IMG>tag ainda não está definido e, embora possa ser usado de maneira hackeada e não compatível com os padrões , o uso com <img>não é recomendado !
Ótimo método candidato, veja conclusões ...
CSS1 's
background-image:propriedade:
Primeira recomendação do W3C: folhas de estilo em cascata, nível 1 17 dez 1996
Esta propriedade define a imagem de plano de fundo de um elemento. Ao definir uma imagem de plano de fundo, deve-se também definir uma cor de plano de fundo que será usada quando a imagem estiver indisponível. Quando a imagem está disponível, ela é sobreposta à cor de fundo.
Esta propriedade existe desde o início do CSS e, no entanto, merece uma menção gloriosa.
Renderização padrão: tamanho original (não pode ser dimensionado, apenas posicionado)
No entanto ,
A background-size:propriedade do CSS3 foi aprimorada, permitindo várias opções de dimensionamento:
Status mais recente do W3C: Nível 3 do Módulo 3 de Fundos e Fronteiras CSS de Recomendação do Candidato 9 de setembro de 2014
[length> | <percentage> | auto ]{1,2} | cover | contain
Mas mesmo com essa propriedade, isso depende do tamanho do contêiner.
Ainda é um bom método candidato, veja as conclusões ...
CSS2 's list-style:propriedade, juntamente comdisplay: list-item :
Primeira recomendação do W3C: folhas de estilo em cascata, nível 2 Especificação CSS2 12 de maio de 1998
list-style-image: A propriedade define a imagem que será usada como marcador de item de lista (marcador)
As propriedades da lista descrevem a formatação visual básica das listas: elas permitem que as folhas de estilo especifiquem o tipo de marcador ( imagem , glifo ou número)
display: list-item- Este valor faz com que um elemento (por exemplo, <li>em HTML) gere uma caixa de bloco principal e uma caixa de marcador.
.myClass {
display: list-item;
list-style-position: inside;
list-style-image: url("someimage.jpg");
}
CSS abreviado: ( <list-style-type> <list-style-position> <list-style-image>)
.myClass {
display: list-item;
list-style: square inside url("someimage.jpg");
}
Renderização padrão: tamanho original (não depende da declaração explícita de tamanho)
Restrições:
A herança transferirá os valores 'estilo de lista' dos elementos OL e UL para elementos LI. Esta é a maneira recomendada de especificar informações de estilo de lista.
Eles não permitem que os autores especifiquem estilos distintos (cores, fontes, alinhamento etc.) para o marcador da lista ou ajustem sua posição
Esse método também não é adequado para a <img>tag, pois a conversão não pode ser feita entre os tipos de elemento, e aqui está o hack limitado e não compatível que não funciona no Chrome.
Bom método candidato, veja conclusões ...
CSS3 's border-image:propriedade recomendação :
Status mais recente do W3C: Nível 3 do Módulo 3 de Fundos e Fronteiras CSS de Recomendação do Candidato 9 de setembro de 2014
Um método do tipo segundo plano que depende da especificação de tamanhos de uma maneira bastante peculiar (não definida para este caso de uso) e das propriedades da borda de fallback até o momento (por exemplo border: solid):
Observe que, mesmo que nunca causem um mecanismo de rolagem, as imagens iniciais ainda podem ser cortadas por um ancestral ou pela janela de exibição.
Este exemplo ilustra a imagem sendo composta apenas como uma decoração de canto inferior direito :
.myClass {
border: solid;
border-width: 0 480px 320px 0;
border-image: url("http://i.imgur.com/uKnMvyp.jpg") 0 100% 100% 0;
}
Aplica-se a: Todos os elementos, exceto elementos da tabela interna quando border-collapse: collapse
Ainda não pode alterar uma <img>tag 's src(mas aqui está um hack ), em vez disso, pode decorá-lo:
.myClass {
border: solid;
border-width: 0 96px 96px 0;
border-image: url("http://upload.wikimedia.org/wikipedia/commons/9/95/Christmas_bell_icon_1.png")
0 100% 100% 0;
}
<img width="300" height="120"
src="http://fc03.deviantart.net/fs71/f/2012/253/b/0/merry_christmas_card_by_designworldwide-d5e9746.jpg"
class="myClass"
Bom método candidato a ser considerado após a propagação dos padrões.
CSS3 s'element() minuta de trabalho da notação do também merece menção:
Nota: A element()função apenas reproduz a aparência do elemento referenciado, não o conteúdo real e sua estrutura.
<div id="img1"></div>
<img id="pic1" src="http://i.imgur.com/uKnMvyp.jpg" class="hide" alt="wolf">
<img id="pic2" src="http://i.imgur.com/TOUfCfL.jpg" class="hide" alt="cat">
Usaremos o conteúdo renderizado de uma das duas imagens ocultas para alterar o plano de fundo da imagem com #img1base no seletor de ID via CSS:
#img1 {
width: 480px;
height: 320px;
background: -moz-element(#pic1) no-repeat;
background-size: 100% 100%;
}
.hide {display: none}
Notas: É experimental e funciona apenas com o -mozprefixo no Firefox e apenas embackground ou background-imagepropriedades, também precisa de tamanhos especificados.
Conclusões
- Qualquer conteúdo semântico ou informação estrutural entra em HTML.
- Informações sobre estilo e apresentação são exibidas em CSS.
- Para fins de SEO, não oculte imagens significativas em CSS.
- Os gráficos de plano de fundo geralmente são desativados durante a impressão.
- As tags personalizadas podem ser usadas e estilizadas em CSS, mas as versões primitivas do Internet Explorer não entendem] (o IE não denomina tags HTML5 (com shiv) ) sem orientação Javascript ou CSS .
- Os SPAs (aplicativos de página única), por design, geralmente incorporam imagens em segundo plano
Dito isso, vamos explorar as tags HTML adequadas para a exibição da imagem:
O <li>elemento [HTML4.01 +]
Caso de uso perfeito do método list-style-imagewith display: list-item.
O <li>elemento, pode estar vazio, permite o fluxo de conteúdo e até é permitido omitir a </li>tag final.
.bulletPics > li {display: list-item}
#img1 {list-style: square inside url("http://upload.wikimedia.org/wikipedia/commons/4/4d/Nuvola_erotic.png")}
#img2 {list-style: square inside url("http://upload.wikimedia.org/wikipedia/commons/7/74/Globe_icon_2014-06-26_22-09.png")}
#img3 {list-style: square inside url("http://upload.wikimedia.org/wikipedia/commons/c/c4/Kiwi_fruit.jpg")}
<ul class="bulletPics">
<li id="img1">movie</li>
<li id="img2">earth</li>
<li id="img3">kiwi</li>
</ul>
Limitações: difícil de estilizar ( width:ou float:pode ajudar)
O <figure>elemento [HTML5 +]
O elemento da figura representa algum conteúdo do fluxo, opcionalmente com uma legenda, que é independente (como uma frase completa) e normalmente é referenciada como uma única unidade a partir do fluxo principal do documento.
O elemento é válido sem conteúdo, mas é recomendado que contenha a <figcaption>.
O elemento pode, assim, ser usado para anotar ilustrações, diagramas, fotos , listagens de código etc.
Renderização padrão: o elemento está alinhado à direita, com preenchimento esquerdo e direito!
O <object>elemento [HTML4 +]
Para incluir imagens, os autores podem usar o elemento OBJECT ou IMG.
O dataatributo é obrigatório e pode ter um tipo MIME válido como um valor!
<object data="data:x-image/x,"></object>
Nota: um truque para usar a <object>tag do CSS seria definir um MimeType válido válido personalizado,x-image/x seguido por nenhum dado (o valor não possui dados após a vírgula necessária ,)
Renderização padrão: 300 x 150px, mas o tamanho pode ser especificado em HTML ou CSS.
Precisa de um navegador compatível com SVG e possui um <image>elemento para imagens rasterizadas
O <canvas>elemento [HTML5 +].
O widthatributo padrão é 300 e o heightatributo padrão é 150 .
o <input> elemento comtype="image"
Limitações:
... o elemento deve aparecer como um botão para indicar que o elemento é um botão.
que o Chrome segue e renderiza um quadrado vazio de 4x4px quando nenhum texto
Solução parcial, defina value=" ":
<input type="image" id="img1" value=" ">
Também fique atento ao próximo <picture>elemento no HTML5.1 , atualmente um rascunho de trabalho .