Eu tenho um painel colorido em azul se este painel estiver sendo selecionado (clique nele). Além disso, adiciono um pequeno sinal ( .png
imagem) a esse painel, que indica que o painel selecionado já foi selecionado antes.
Portanto, se o usuário vê, por exemplo, 10 painéis e 4 deles têm esse pequeno sinal, ele sabe que já clicou nesses painéis antes. Este trabalho está bom até agora. O problema agora é que não consigo exibir o pequeno letreiro e deixar o painel azul ao mesmo tempo.
Defino o painel para azul com o css background: #6DB3F2;
e a imagem de fundo com background-image: url('images/checked.png')
. Mas parece que a cor do plano de fundo está acima da imagem, para que você não possa ver o sinal.
Portanto, é possível definir z-index
es para a cor de fundo e a imagem de fundo?
Para mim, essa solução não deu certo:
Mas, em vez disso, funcionou de outra maneira:
o css:
fonte
fonte
Com base no MDN Web Docs, você pode definir vários planos de fundo usando a
background
propriedade abreviada ou propriedades individuais, excetobackground-color
. No seu caso, você pode fazer um truque usando olinear-gradient
seguinte:O primeiro item (imagem) no parâmetro será colocado em cima. O segundo item (fundo colorido) será colocado embaixo do primeiro. Você também pode definir outras propriedades individualmente. Por exemplo, para definir o tamanho e a posição da imagem.
O benefício desse método é que você pode implementá-lo para outros casos com facilidade, por exemplo, você deseja tornar a cor azul sobrepondo a imagem com certa opacidade.
Parâmetros de propriedades individuais são definidos respectivamente. Como a imagem é colocada abaixo da sobreposição de cores, seus parâmetros de propriedade também são colocados após os parâmetros de sobreposição de cores.
fonte
problema realmente interessante, ainda não o vi. esse código funciona bem para mim. testei em chrome e IE9
fonte
Você também pode usar um truque curto para usar imagem e cor, assim: -
fonte
Isso realmente funciona para mim:
Você também pode soltar uma sombra sólida e definir a imagem de fundo:
Se a primeira opção não estiver funcionando por algum motivo e você não quiser usar a sombra da caixa, sempre poderá usar um pseudo-elemento para a imagem sem nenhum HTML extra:
fonte
Aqui está como eu estilizei meus botões coloridos com um ícone no fundo
Eu usei a propriedade "background-color" para a cor e a propriedade "background" para a imagem.
fonte
<li style="background-color: #ffffff;"><a href="https://stackoverflow.com/<%=logo_marka_url%>"><img border="0" style="border-radius:5px;background: url(images/picture.jpg') 50% 50% no-repeat;width:150px;height:80px;" src="images/clearpixel.gif"/></a></li>
Outra imagem de caixa de amostra e cor de fundo
1.Primeira área de imagem de correção clearpixelpixel 2.style caixa de área de imagem central 3.li fundo ou estilo de cor div
fonte
fonte