É possível definir o equivalente a um atributo src de uma tag img em CSS?

533

É possível definir o srcvalor do atributo em CSS? No momento, o que estou fazendo é:

<img src="pathTo/myImage.jpg"/>

e eu quero que seja algo assim

<img class="myClass" />
.myClass {
    some-src-property: url("pathTo/myImage.jpg");

Eu quero fazer isso sem usar as propriedades backgroundou background-image:em CSS.

html css image Rakesh Juyal
fonte
1
Este é, aparentemente, vai ser possível em CSS3: w3.org/TR/css3-values/#attribute
GraphicDivine
7
Agora é possível. Testado em Chrome / Safari / Opera: stackoverflow.com/a/11484688/632951
Pacerier
2
Mas FireFox 30,0, Internet Explorer 11.0 não suporta
Laxmikant Dange
Esta solução somente CSS funcionou para mim (em todos os navegadores): stackoverflow.com/a/19114098/448816 , com a exceção que eu tive que adicionar: 'background-size: 100%;'.
mikhail-t
(2020) Você pode fazer isso com JS, getPropertyValue("--src")consulte: jsfiddle.net/CustomElementsExamples/vjfpu3a2
Danny '365CSI' Engelman

Respostas:

882

Use content:url("image.jpg").

Solução de trabalho completa ( Live Demo):

<!doctype html>

<style>
.MyClass123{
	content:url("http://imgur.com/SZ8Cm.jpg");
}
</style>

<img class="MyClass123"/>
Expandir snippet

Testado e funcionando:

  • Chrome 14.0.835.163
  • Safari 4.0.5
  • Opera 10.6

Testado e não está funcionando:

  • FireFox 40.0.2 (observando Developer Network Tools, você pode ver que o URL é carregado, mas a imagem não é exibida)
  • Internet Explorer 11.0.9600.17905 (o URL nunca carrega)
Pacerier
fonte
7
@gotqn, apenas Chrome Safari Opera até agora.
Pacerier
36
@ EricG, aplicativos diferentes têm requisitos diferentes. Se não atender aos seus requisitos, não o utilize. Se isso acontecer, use-o.
Pacerier 22/02
4
Não funcionar o IE10 é um impedimento. Nós abandonamos o IE7 (não vamos falar sobre o IE6). IE8 também, se necessário. Mas IE9 - IE10 ... não.
Rolf
11
Vale a pena acrescentar que, mesmo em navegadores que suportam a atribuição contentde img, muda seu comportamento. A imagem começa a ignorar os atributos de tamanho e, no Chrome / Safari, perde as opções do menu de contexto, como 'Salvar imagem'. Isso ocorre porque a atribuição de um contentefetivamente converte imgdo elemento substituído vazio para algo como <span><img></span>.
Ilya Streltsyn
3
sem o suporte adequado do navegador, não vejo isso como uma resposta válida, desculpe.
emachine
183

Existe uma solução que eu descobri hoje (funciona no IE6 +, FF, Opera, Chrome):

<img src='willbehidden.png' 
 style="width:0px; height:0px; padding: 8px; background: url(newimage.png);">

Como funciona:

  • A imagem é reduzida até não ser mais visível pela largura e altura.
  • Em seguida, você precisa "redefinir" o tamanho da imagem com preenchimento. Este fornece uma imagem 16x16. É claro que você pode usar preenchimento esquerdo / preenchimento superior para criar imagens retangulares.
  • Finalmente, a nova imagem é colocada lá usando o plano de fundo.
  • Se a nova imagem de plano de fundo for muito grande ou muito pequena, recomendo usar, background-sizepor exemplo: o background-size:cover;que encaixa sua imagem no espaço alocado.

Também funciona para enviar imagens de entrada e permanecer clicáveis.

Veja demo ao vivo: http://www.audenaerde.org/csstricks.html#imagereplacecss

Aproveitar!

RobAu
fonte
6
@RobAnu: Isso funciona muito bem - jsfiddle
TimPietrusky
9
Tenho que dizer a você que isso é fascinante e inteligente, mas uma DIV vazia é mais direta.
Volomike
11
Nesse caso é. Existem casos, no entanto, em que você não pode controlar o HTML e, no entanto, deseja manipular o IMG. Há esta solução também irá trabalhar
Robau
2
Se a imagem tiver um srcatributo, esta é a técnica que você precisa. +1 - me ajudou muito
James Longo
3
Não classificando nesta resposta, que pode ser a solução para alguns aplicativos, mas esse método tem uma limitação. Você não tem controle sobre as dimensões da renderização do arquivo de imagem. No uso normal, você pode controlar a largura da altura de uma imagem, se o arquivo estiver especificado na fonte. Mas isso basicamente não é diferente de uma div com uma imagem de plano de fundo, onde se sua div for maior que a imagem, você estará sem sorte.
TARKUS 25/11
114

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:

Mostrar snippet de código

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

  1. Qualquer conteúdo semântico ou informação estrutural entra em HTML.
  2. Informações sobre estilo e apresentação são exibidas em CSS.
  3. Para fins de SEO, não oculte imagens significativas em CSS.
  4. Os gráficos de plano de fundo geralmente são desativados durante a impressão.
  5. 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 .
  6. 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.

Mostrar snippet de código

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.

o <SVG> tag

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 .

CSᵠ
fonte
(2020) Use propriedades CSS: stackoverflow.com/questions/2182716/…
Danny '365CSI' Engelman
Ótima resposta, mas mostra o completo fracasso da web como plataforma para fornecer primitivas básicas.
serraosays
26

Eu usei a solução div vazia, com este CSS:

#throbber {
    background-image: url(/Content/pictures/ajax-loader.gif);
    background-repeat: no-repeat;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
}

HTML:

<div id="throbber"></div>
Emmanuel Touzery
fonte
E se eu quiser exibi-lo em linha? Adicionando "display: inline" dá a minha dimensão div de 0x0 ...
elsurudo
1
@elsurudo Use display: inline-block, se você deseja definir uma largura e altura de um elemento inline
Erin Drummond
1
A resposta principal não funciona com o Firefox, então eu gosto mais da sua resposta! E é claro e não tem hacks css.
Sergey Bogdanov
Se você precisar exibir mais de uma imagem, lembre-se de que o campo id é tecnicamente exclusivo, portanto, o ideal é usar um seletor de classe CSS em vez do ID.
mix3d
Imagens desse tipo não serão impressas corretamente se você tiver os gráficos de fundo desativados nas configurações de impressão.
precisa saber é o seguinte
14

Encontrei uma maneira melhor do que as soluções propostas, mas ela usa a imagem de fundo. Método compatível (não é possível confirmar para o IE6) Créditos: http://www.kryogenix.org/code/browser/lir/

<img src="pathTo/myImage.jpg"/>

O CSS:

img[src*="pathTo/myImage.jpg"] {

    background-image: url("mynewimg.jpg"); /* lets say 20x20 */
    width: 20px;

    display:inline-block;
    padding: 20px 0 0 0;
    height: 0px !important;

    /* for IE 5.5's bad box model */
    height /**/:20px;
}

A imagem antiga não é vista e a nova é vista como esperado.


A seguinte solução pura funciona apenas para webkit

img[src*="pathTo/myImage.jpg"] {

    /* note :) */
    content:'';
    display:inline-block;

    width: 20px;
    height: 20px;
    background-image: url("mynewimg.jpg"); /* lets say 20x20 */

}
EricG
fonte
Esse é um truque interessante, mas é realmente compatível com os padrões? A página W3C diz que a contentpropriedade se aplica apenas às classes pseudo :beforee :after. Além disso, se você precisar dar suporte ao IE7 ou anterior, acho que o contentsuporte não existe. Ainda assim, muito tentador.
Jatrim #
Você está certo, acabei de encontrar um método mais compatível. Atualizando minha postagem! Agora vote em mim;) Haha.
EricG
A abordagem atualizada é definitivamente melhor do que a que depende do conteúdo. Obrigado por incluir o link original. Isso foi perspicaz. Você notará que a resposta do @ RobAu também é muito semelhante à sua versão atualizada.
Jatrim
1
@jatrim A contentpropriedade se aplica a todos os elementos. http://www.w3.org/TR/css3-content/#content
XP1
13

Eles estão certos. IMG é um elemento de conteúdo e CSS é sobre design. Mas e quando você usa alguns elementos ou propriedades de conteúdo para fins de design? Eu tenho IMG nas minhas páginas da web que devem mudar se eu mudar o estilo (o CSS).

Bem, esta é uma solução para definir a apresentação IMG (não realmente a imagem) no estilo CSS.

  1. crie um gif ou png transparente 1x1.
  2. Atribua a propriedade "src" do IMG a essa imagem.
  3. Defina a apresentação final com "background-image" no estilo CSS.

Ele funciona como um encanto :)

Frank
fonte
5
-1 Mesmo que sua resposta não seja ruim, ele menciona especificamente que não deseja usarbackground*
fresskoma
1
isso é um truque ... na minha opinião, os truques serão alterados pelos navegadores ... e um dia de manhã você verá um inferno no seu site: D :)))
Mahdi Jazini
11

Aqui está uma solução muito boa -> http://css-tricks.com/replace-the-image-in-an-img-with-css/

Pro (s) e Con (s):
(+) trabalha com vetor imagem que têm relação largura / altura (a coisa que Robau s' resposta de não lida com)
(+) é entre navegadores (funciona também para o IE8 +)
(+), usa apenas CSS. Portanto, não é necessário modificar o img src (ou se você não tem acesso / não deseja alterar o atributo img src já existente).
(-) desculpe, ele usa o atributo css em segundo plano :)

OviC
fonte
Agora, essa é a solução adequada, funciona para mim em todos os navegadores, obrigado! Também vale mencionar que eu tinha que acrescentar: tamanho do plano de fundo: 100%; para a classe css na solução acima para fazer com que a imagem de substituição seja exibida corretamente.
mikhail-t
9

Você pode definir 2 imagens no seu código HTML e usar display: none;para decidir qual delas estará visível.

Kostas Andrianopoulos
fonte
Eu estava pesquisando em toda parte por uma solução que respondesse à Web, mas também mantivesse o SEO. Queria usar consultas de mídia em CSS para alterar minha imagem, dependendo do dispositivo usado, mas queria manter meu conteúdo em HTML. Declarar fontes em CSS era uma rota que eu não queria seguir, portanto background-imagenão era uma opção. Eu queria imgtags para fins de SEO. Sua resposta é tão simples, elegante e resolve todos os meus obstáculos! bravo! Além disso, o usuário não precisa baixar as duas imagens. Além disso, posso adicionar qualquer número de imagens.
Xavier
Todas as respostas que li até agora me forçariam a declarar minhas fontes na minha folha de estilo ou usar CSS embutido na minha marcação. Nenhum dos quais fiquei satisfeito. Código bagunçado!
Xavier
7

Não, você não pode definir o atributo src da imagem via CSS. O mais próximo que você pode chegar é, como você diz, backgroundou background-image. Eu não recomendaria fazer isso de qualquer maneira, pois seria um pouco ilógico.

No entanto, existe uma solução CSS3 disponível para você, se os navegadores que você está segmentando puderem usá-la. Use content:url como descrito na resposta do Pacerier . Você pode encontrar outras soluções para vários navegadores nas outras respostas abaixo.

cleto
fonte
1
por que o voto negativo? esta resposta é mais precisa que a resposta aceita.
harsimranb
1
A melhor resposta até agora: NÃO, você não pode fazê-lo com CSS.
Milche Patern
4

Coloque várias imagens em um contêiner "controlador" e altere a classe do contêiner. No CSS, adicione regras para gerenciar a visibilidade das imagens, dependendo da classe do contêiner. Isso produzirá o mesmo efeito que a alteração da img srcpropriedade de uma imagem única.

HTML:

<span id="light" class="red">
    <img class="red" src="red.png" />
    <img class="yellow" src="yellow.png" />
    <img class="green" src="green.png" />
</span>

CSS:

#light         { ... }
#light         *        { display: none; }     // all images are hidden
#light.red     .red     { display: inline; }   // show red image when #light is red
#light.yellow  .yellow  { display: inline; }   // .. or yellow
#light.green   .green   { display: inline; }   // .. or green

Observe que ele pré-carregará todas as imagens, como CSS backround-image, mas diferente da alteração img srcvia JS.

Bronx
fonte
3

Caminho alternativo

.myClass {
background: url('/img/loading_big.gif');
}
<div class="myClass"></div>
Tukaz
fonte
3

Alguns dados eu deixaria em HTML, mas é melhor definir o src no CSS:

<img alt="Test Alt text" title="Title text" class="logo">

.logo {
    content:url('../images/logo.png');
}
Renat Gatin
fonte
2

Tanto quanto sei, VOCÊ NÃO PODE. CSS é sobre estilo e src da imagem é conteúdo.

NawaMan
fonte
3
Atualmente, muitas vezes as imagens existem apenas para estilizar a página.
Lorenzo Polidori
2
A implicação é que pode haver uma diferença entre as imagens usadas como bordas, planos de fundo etc. e aquelas que realmente fazem parte do conteúdo da página. diagramas, fotos de artigos etc.
Rhys van der Waerden /
1
VOCÊ PODE, e há casos válidos comuns em que você deseja.
ryan0
2

Reiterar uma solução anterior e enfatizar a pura implementação de CSS aqui é a minha resposta.

Uma solução de CSS puro é necessária nos casos em que você está adquirindo conteúdo de outro site e, portanto, você não tem controle sobre o HTML que é entregue. No meu caso, estou tentando remover a marca do conteúdo de origem licenciado para que o licenciado não precise anunciar para a empresa da qual está comprando o conteúdo. Portanto, estou removendo o logotipo deles, mantendo todo o resto. Devo observar que isso está dentro do contrato do meu cliente para fazê-lo.

{ /* image size is 204x30 */
     width:0;
     height:0;
     padding-left:102px;
     padding-right:102px;
     padding-top:15px;
     padding-bottom:15px;
     background-image:url(http://sthstest/Style%20Library/StThomas/images/rhn_nav_logo2.gif);
}
Daniel Byrne
fonte
2

Eu sei que essa é uma pergunta muito antiga, mas nenhuma resposta fornece o raciocínio adequado para o porquê disso nunca ser feito. Enquanto você pode "fazer" o que está procurando, não pode fazê-lo de maneira válida. Para ter uma tag img válida, é necessário ter os atributos src e alt.

Portanto, qualquer uma das respostas que permitam fazer isso com uma tag img que não use o atributo src está promovendo o uso de código inválido.

Em resumo: o que você está procurando não pode ser feito legalmente dentro da estrutura da sintaxe.

Fonte: Validador W3

Geowil
fonte
2

Ou você poderia fazer isso que eu encontrei na coisa da interweb.

https://robau.wordpress.com/2012/04/20/override-image-src-in-css/

<img src="linkToImage.jpg" class="egg">
.egg {
  width: 100%;
  height: 0;
  padding: 0 0 200px 0;
  background-image: url(linkToImage.jpg);
  background-size: cover;
}

Esconder a imagem de maneira tão eficaz e preencher o fundo. Ah, que truque, mas se você quiser uma tag IMG com texto alternativo e um plano de fundo que possa ser dimensionado sem usar JavaScript?

Em um projeto em que estou trabalhando agora, criei um modelo de galho de bloco de herói

<div class="hero">
  <img class="image" src="{{ bgImageSrc }}"
       alt="{{ altText }}" style="background-image: url({{ bgImageSrc }});">
</div>
Pocketninja
fonte
1

Se você não deseja definir uma propriedade de plano de fundo, não pode definir o atributo src de uma imagem usando apenas CSS.

Como alternativa, você pode usar o JavaScript para fazer isso.

Guillaume Flandre
fonte
1

Usando CSS, isso não pode ser feito. Mas, se você estiver usando o JQuery, algo assim fará o truque:

$("img.myClass").attr("src", "http://somwhere");
Veera
fonte
na verdade, ele pode)) veja a resposta nesta mesma pergunta aqui: stackoverflow.com/questions/2182716/…
mikhail-t
1

Você pode convertê-lo com JS:

$('.image-class').each(function(){
    var processing = $(this).attr('src');
    $(this).parent().css({'background-image':'url('+processing+')'});
    $(this).hide();
});
Raul Martin
fonte
0

Se você estiver tentando adicionar uma imagem em um botão dinamicamente, com base no contexto do seu projeto, poderá usar o? tomar para referenciar a fonte com base em um resultado. Aqui estou usando o mvvm design para permitir que meu valor Model.Phases [0] determine se eu quero que meu botão seja preenchido com imagens de uma lâmpada ligada ou desligada com base no valor da fase da luz.

Não tenho certeza se isso ajuda. Estou usando JqueryUI, Blueprint e CSS. A definição da classe deve permitir que você estilize o botão com base no que quiser.

    <button>                           
  <img class="@(Model.Phases[0] ? "light-on": "light-off")" src="@(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>                             
  <img class="@(Model.Phases[0] ? "light-on": "light-off")" src="@(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>   
  <img class="@(Model.Phases[0] ? "light-on": "light-off")" src="@(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>

Tschlegel
fonte
0

Eu acrescentaria o seguinte: a imagem de fundo também pode ser posicionada com background-position: x y;(x horizontal e vertical). (..) Meu caso, CSS:

(..) 
#header {
  height: 100px; 
  background-image: url(http://.../head6.jpg); 
  background-position: center; 
  background-repeat: no-repeat; 
  background-color: grey; 
  (..)
} 
(...)
John
fonte
0

Código HTML: 

<!DOCTYPE html>
<html>
     <head>
         <link type="text/css" rel="stylesheet" href="css destination" />
     </head>
     <body>
<!-- click-able pic with link -->
           <a href="site you want"> 
<!-- Take the off if you don't want click-able link -->
                <h1 id(or class)="nameOfClassorid">
                     <span>Text that is not important</span>
                </h1>
           </a>
      </body>
 </html>

Código CSS:

span {
     display: none;
}
h1 id or class {
     height: of pic;
     width: of pic;
/* Only flaw (so far) read bottom */
     background-image:url(/* "image destination" */);
}
h1 id or class:hover {
/* Now the awesome part */
     background-image:url(/* 'new background!!!' */);
}

Estou estudando html depois da escola há alguns dias e queria saber como fazer isso. Descobriu o fundo e, em seguida, coloque 2 e 2 juntos. Isso funciona 100% eu verifiquei, se não tiver certeza de preencher as coisas necessárias !!! Precisamos especificar a altura, porque sem ela não haveria nada !!! Vou deixar esse shell básico que você pode adicionar.

Exemplo:

 <!DOCTYPE html>
 <html>
     <head>
         <link type="text/css" rel="stylesheet" href="style.css" />
     </head>
     <body>
           <a href="http:localhost"> 
                <h1>
                     <span>Text that is not important</span>
                </h1>
           </a>
     </body>
 </html>
span {
     display: none;
}
h1 {
     height: 100px;
     width: 100px;
     background-image:url("http://linuxlog.org/wp-content/uploads/2011/01/[email protected]");
}

h1:hover {
     height: 300px;
     width: 300px;
     background-image:url("http://cdn.css-tricks.com/images/ads/wufoo-600x600-red.png");
}

PS Sim, eu sou um usuário Linux;)

Z_Doctor
fonte
0

Qualquer método baseado em backgroundou background-imageprovavelmente falhará quando o usuário imprimir o documento com "imprimir cores e imagens de plano de fundo " desativadas. Infelizmente, esse é o padrão típico do navegador.

O único método compatível com a impressão e compatível com vários navegadores é o proposto pelo Bronx.

Simon Rozman
fonte
0

Carregando IMG src da definição de CSS, usando propriedades modernas de CSS

<style>
  body {
    --imgid: 1025; /* optional default img */
  }

  .shoes {
    --imgid: 21;
  }

  .bridge {
    --imgid: 84;
  }

  img {
    --src: "//i.picsum.photos/id/"var(--imgid)"/180/180.jpg"
  }

</style>
<script>
  function loadIMG(img) {
    img.src = getComputedStyle(img)	// compute style for img
      .getPropertyValue("--src")		// get css property
      .replace(/[" ]/g, "");				// strip quotes and space
  }

</script>
<img src onerror=loadIMG(this) class=bridge>
<img src onerror=loadIMG(this) class=shoes>
<img src onerror=loadIMG(this)>
Expandir snippet

  • a srcdefinição vazia em um <IMG> aciona o manipulador onerror: função loadIMG
  • A função loadIMG calcula o valor CSS
  • retira todos os caracteres ilegais
  • define o IMG.src
  • quando o CSS muda, a imagem NÃO é atualizada! Você precisa chamar o loadIMG novamente

JSFiddle: https://jsfiddle.net/CustomElementsExamples/vjfpu3a2/

Respostas SO relacionadas: WCPROPS

Danny '365CSI' Engelman
fonte
-3

Basta usar HTML5 :) 

<picture>
    <source srcset="smaller.jpg" media="(max-width: 768px)">
    <source srcset="default.jpg">
    <img srcset="default.jpg" alt="My default image">
</picture>
Máx.
fonte
O OP está procurando especificamente limpar sua marcação HTML com uma solução CSS. Essa resposta apenas confundiria ainda mais a marcação.
Webaholik 04/11/19