Usando: before pseudoelemento CSS para adicionar imagem ao modal


116

Eu tenho uma classe CSS Modalque está absolutamente posicionada, indexada com z acima de seu pai e bem posicionada com JQuery. Quero adicionar uma imagem circunflexa (^) ao topo da caixa modal e estava olhando para usar o :beforepseudo seletor CSS para fazer isso de forma limpa.

A imagem precisa ser absolutamente posicionada e indexada em Z acima do modal, mas não encontrei nenhuma maneira de adicionar a classe apropriada à imagem no contentatributo:

.Modal:before{
  content:url('blackCarrot.png') /* with class ModalCarrot ??*/
}

.ModalCarrot{
   position:absolute;
   left:50%;
   margin-left:-8px;
   top:-16px;
}

Segunda melhor opção - posso adicionar os estilos embutidos no atributo de conteúdo?

Respostas:


175

http://caniuse.com/#search=:after

:aftere :beforecomcontent estão bem para usar como eles são suportados em todos os principais navegadores diferente do Internet Explorer, pelo menos, 5 versões para trás. O Internet Explorer tem suporte completo na versão 9+ e suporte parcial na versão 8.

É isso que você está procurando?

.Modal:after{
  content:url('blackCarrot.png'); /* with class ModalCarrot ??*/
  position:relative; /*or absolute*/
  z-index:100000; /*a number that's more than the modal box*/
  left:-50px;
  top:10px;
}

.ModalCarrot{
   position:absolute;
   left:50%;
   margin-left:-8px;
   top:-16px;
}

Se não, você pode explicar um pouco melhor?

ou você pode usar jQuery, como Joshua disse:

$(".Modal").before("<img src='blackCarrot.png' class='ModalCarrot' />");


2
Este. O ponto de Joshua sobre a compatibilidade do navegador também está certo - o IE8 renderiza a imagem no conteúdo: after, mas não renderiza as partes dela que estão fora da fronteira do pai.
RSG

Agora (em 2017), o IE 11 é a única versão do IE ainda compatível com a Microsoft; portanto, não há muito sentido em se preocupar com a compatibilidade do IE8. Além disso, uma solução CSS é quase sempre melhor do que a solução jQuery porque eles tendem a carregar muito mais rápido e o jQuery pode causar oscilação da tela reescrevendo seu layout após o carregamento da página.
Nosajimiki

1
@Nosajimiki se você deve ou não se preocupar com navegadores mais antigos depende principalmente de seus visitantes.
Jose Faeti

35

Você deve usar o atributo background para dar uma imagem a esse elemento, e eu usaria :: after ao invés de before, dessa forma ele já deve estar desenhado em cima do seu elemento.

.Modal:before{
  content: '';
  background:url('blackCarrot.png');
  width: /* width of the image */;
  height: /* height of the image */;
  display: block;
}

Obrigado pela sugestão - o modal tem uma borda, então não acho que posso usar a imagem de fundo para posicionar a imagem da cenoura acima da cor da borda / bg conforme necessário.
RSG

Por que não? se você posicionar absolutamente esse pseudo elemento, poderá movê-lo com as margens. Ele será desenhado em cima das outras bordas do elemento e / ou da cor bg.
Jose Faeti

A imagem de fundo não pode se estender para fora da borda do div?
RSG

12
Você provavelmente precisa adicionar um conteúdo: ''; a isso para fazer parecer
Willster

13

1.esta é minha resposta para o seu problema.

.ModalCarrot::before {
content:'';
background: url('blackCarrot.png'); /*url of image*/
height: 16px; /*height of image*/
width: 33px;  /*width of image*/
position: absolute;
}

5
Eu adicionei background-size: 33px 16px; background-repeat: no-repeat;para dimensionar a imagem!
Hasse Björk

-4

O conteúdo e o anterior são altamente confiáveis ​​entre os navegadores. Eu sugeriria continuar com jQuery para fazer isso. Não tenho certeza do que você está fazendo para descobrir se essa cenoura precisa ser adicionada ou não, mas você deve ter uma ideia geral:

$(".Modal").before("<img src='blackCarrot.png' class='ModalCarrot' />");

1
Isso me deixa triste. Temos um conjunto misericordiosamente limitado de navegadores direcionados, então ainda estou interessado no que é possível com CSS.
RSG

Mesmo com o conteúdo sendo muito usado em CSS3, pelo que vi ainda é um daqueles que não são totalmente suportados em qualquer lugar. Acredito que isso tenha a ver com algum medo de ser capaz de injetar coisas más. Além disso, acredito que o conteúdo precisa de um elemento já existente para injetar - não tenho certeza se posso manipular o DOM tanto por conta própria.
Joshua

4
Esta resposta está errada sobre o suporte não confiável em todos os navegadores. Contente after/beforesão muito confiáveis ​​em todos os principais navegadores, funcionou desde ie8, pelo menos FF3.5, pelo menos Chrome 9, pelo menos Opera 10.6, pelo menos Safari 3.2, todas as versões do iOS Safari, todas as versões do Opera mini, todas as versões do Opera Mobile e qualquer versão do navegador Android. se você quiser saber se algo é compatível com navegadores diferentes, verifique: caniuse.com/#search=:after
android.nick

Só porque a internet diz que sim, não significa que seja verdade. Trabalhe com eles, eles agem de maneira diferente em cada navegador. E o IE 7 ainda é um navegador muito popular, que não oferece suporte a nenhum deles.
Joshua

3
Na verdade, você é melhor fora com CSSmais de JavaScriptum presente. Não importa o quão avançado seja o navegador, o usuário ainda pode ter JavaScriptdesativado ... Felizmente, neste caso, os seletores :beforee :aftersão amplamente suportados; quirksmode.org/css/selectors
Steve Buzonas
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.