0

Primeiramente, é bem possível que já exista tópicos falando sobre isso. Não foi falta de pesquisa, acredito apenas que não encontrei as palavras chave corretas.

Pergunta auto explicativa. Preciso que determinado código apareça na pagina, de acordo com a classe que foi atribuída à <div>.

Como exemplo, seria mais ou menos assim:

    .a{
    <img src="caminho/imagem1.png" title="Imagem 1" >
    }
    .b{
    <img src="caminho/imagem2.png" title="Imagem 2" >
    }
    <div class="a"></div>
    <p>
    <div class="b"></div>

É possível?

9
  • Por que você não faz isso com o jquery? Commented 12/03/2018 às 15:37
  • Meu amigo, até onde eu sei isso não é possível... normalmente para carregar imagens no CSS você vai ter que fazer como nesse exemplo aqui: background:#fafafa url('img/grey.png') repeat; nesse exemplo to carregando uma imagem para o background de uma div!
    – WPfan
    Commented 12/03/2018 às 15:40
  • Ficou confuso seu código e a pergunta... Vc quer que se a classe for ".a" apareça uma tag <img> dentro da <div> tipo assim: <div class="a"><img src="caminho/imagem1.png" title="Imagem 1" ></div> ou vc apenas quer apenas que sempre que vc coloque a class ".a" a <div> fique com uma imagem de fundo?
    – hugocsl
    Commented 12/03/2018 às 15:48
  • 4
    css é linguagem de estilo, ou seja estiliza um documento existente (ou pseudo-elementos) e não de programação, por isto não existe sentido em fazer tal operação no CSS, seria mais lógico usar display:none nos elementos e adiciona-los no corpo do HTML e conforme a classe ou hover por exemplo, eles seriam exibidos.
    – Syzoth
    Commented 12/03/2018 às 16:29
  • 1
    Sei que é uma pergunta antiga, mas vale ler isso daqui. Commented 27/06/2019 às 20:02

3 Respostas 3

2

Primeiramente o css apenas controla o visual do código html, e não e possível injetar trechos de códigos da forma como você esta pensando.

Adicionar um elemento visual em volta de um classe é possível com CSS da seguinte forma:

.a:before {
  content: '';
  display: block;
  width: 300px;
  height: 300px;
  background-image: url(http://www.artemisia.org.br/images/projetosrealizados/(0)tetse.jpg);
}

mas adicionar coisas dinamicamente no html também não seria uma saída interessante pois ao olhar o código html você não sabe onde o elemento esta, de onde vem, e você acaba deixando a coisa bem difícil em termos de manter o projeto.

Eu adicionaria o elemento que deseja dentro da sua div e controlaria a visibilidade da child element a partir do hover do parent.

-1

Pelo que entendi, você quer selecionar um elemento do seu HTML e atribuir uma imagem dinamicamente de acordo com a classe de seu elemento CSS. Fiz um exemplo usando Jquery aonde atribuo a imagem ao elemento que contém a classe a.

Obs: Com CSS acredito que não seja possível.

$(document).ready( ()=> {
    
    let img1 = "<img  src='http://www.artemisia.org.br/images/projetosrealizados/(0)tetse.jpg' title='exemplo titulo' alt='exemplo alt'  />"
  
   $('.a').html(img1);
})
<div class="a"></div>

<div class="b"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

-2

Neste teu exemplo não e possível tenta desta maneira:

<style>
    .a {
        width: 100px;
        background: #000 url("suaimagem.jpg" no-repeat);
    }
    .p {
        width:100px;
        background: #000 url("suaimagem.jpg" no-repeat);
    }
</style>
<div class="a"></div>
<div class="b"></div>

ou dentro da sua div insira sua imagem:

<div class="a">
    <img src="suaimagem.jpg" width:[tamanho desejado ou % ou px]/>
</div>
<div class="b">
    <img src="suaimagem.jpg" width:[tamanho desejado ou % ou px]/>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .