Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

RobertrsO

Duvida sobre background-image.

Recommended Posts

Gostaria de saber se é possível adicionar uma imagem para cada tópico, ou para cada capitulo de um modulo?

Por exemplo: estou utilizando o css em uma bíblia. É possível adicionar a imagem em livros  diferentes  dentro dela?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá @RobertrsO, é possível sim. Basta você criar uma classe para cada elemento e atribuir as imagens a cada um deles.

Ex:

<span class="classe-1"><span>
<span class="classe-2"><span>
.classe-1 {
  background-image: url("img1.png");
}
.classe-2 {
  background-image: url("img2.png");
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

 

3 horas atrás, lciceris disse:

Olá @RobertrsO, é possível sim. Basta você criar uma classe para cada elemento e atribuir as imagens a cada um deles.

Ex:


<span class="classe-1"><span>
<span class="classe-2"><span>

.classe-1 {
  background-image: url("img1.png");
}
.classe-2 {
  background-image: url("img2.png");
}

 

Então se eu fosse criar um modulo com dez livros por exemplo, ficaria assim? Ou a tag seria a mesma, mas com o detalhe do nome do livro embutido?

<span class="livro-1"><span>

<span class="livro-2"><span>

<span class="livro-3"><span>

<span class="livro-4"><span>

<span class="livro-5"><span>

<span class="livro-6"><span>

<span class="livro-7"><span>

<span class="livro-8"><span>

<span class="livro-9"><span>

<span class="livro-10"><span>

 

.livro-1 {
  background-image: url("img1.png");
}
.livro-2 {
  background-image: url("img2.png");
}
.livro-3 {
  background-image: url("img3.png");
}
.livro-4 {
  background-image: url("img4.png");
}
.livro-5 {
  background-image: url("img5.png");
}
.livro-6 {
  background-image: url("img6.png");
}
.livro-7 {
  background-image: url("img7.png");
}
.livro-8 {
  background-image: url("img8.png");
}
.livro-9 {
  background-image: url("img9.png");
}
.livro-10 {
  background-image: url("img10.png");
}

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.