CSS: imagem de fundo na cor de fundo

169

Eu tenho um painel colorido em azul se este painel estiver sendo selecionado (clique nele). Além disso, adiciono um pequeno sinal ( .pngimagem) 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-indexes para a cor de fundo e a imagem de fundo?

— mkn
fonte

290

Você precisa usar o nome completo da propriedade para cada um:

background-color: #6DB3F2;
background-image: url('images/checked.png');

Ou você pode usar a abreviação de segundo plano e especificar tudo em uma linha:

background: url('images/checked.png'), #6DB3F2;

— trapaceiro
fonte

7

O primeiro método não funcionou para mim. O segundo método abreviado funciona perfeitamente.

— Steve Breese

1

Valor de estilo inseguro

— Nexeuz

@Nexeuz, por que você considera essa sintaxe de estilo como Nexeuz inseguro?

— Webwoman

31

Para mim, essa solução não deu certo:

background-color: #6DB3F2;
background-image: url('images/checked.png');

Mas, em vez disso, funcionou de outra maneira:

<div class="block">
<span>
...
</span>
</div>

o css:

.block{
  background-image: url('img.jpg') no-repeat;
  position: relative;
}

.block::before{
  background-color: rgba(0, 0, 0, 0.37);
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  width: 100%;
}

— Francisc Aknai
fonte

2

Obrigado pelo código Francisc !! Como ele diz, juntar a cor e a imagem de fundo também não resolveu o problema. Com essa ajuda e pequenas alterações no meu código, consegui resolver o problema.

— Mikel

17

E se você quiser Gerar uma Sombra Negra em segundo plano, poderá usar o seguinte:

background:linear-gradient( rgba(0, 0, 0, 0.5) 100%, rgba(0, 0, 0, 0.5)100%),url("logo/header-background.png");

— Risa__B
fonte

5

Com base no MDN Web Docs, você pode definir vários planos de fundo usando a backgroundpropriedade abreviada ou propriedades individuais, exceto background-color. No seu caso, você pode fazer um truque usando o linear-gradientseguinte:

background-image: url('images/checked.png'), linear-gradient(to right, #6DB3F2, #6DB3F2);

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.

background-size: 30px 30px;
background-position: bottom right;
background-repeat: no-repeat;

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.

background-image: linear-gradient(to right, rgba(109, 179, 242, .6), rgba(109, 179, 242, .6)), url('images/checked.png');
background-size: cover, contain;
background-position: center, right bottom;
background-repeat: no-repeat, no-repeat;

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.

— Luki B. Subekti
fonte

2

problema realmente interessante, ainda não o vi. esse código funciona bem para mim. testei em chrome e IE9

<html>
<head>
<style>
body{
    background-image: url('img.jpg');
    background-color: #6DB3F2;
}
</style>
</head>
<body>
</body>
</html>

— Ramzi Khahil
fonte

2

Você também pode usar um truque curto para usar imagem e cor, assim: -

body {
     background:#000 url('images/checked.png');
 }

— Kesar Sisodiya
fonte

1

Isso realmente funciona para mim:

background-color: #6DB3F2;
background-image: url('images/checked.png');

Você também pode soltar uma sombra sólida e definir a imagem de fundo:

background-image: url('images/checked.png');
box-shadow: inset 0 0 100% #6DB3F2;

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:

.btn{
    position: relative;
    background-color: #6DB3F2;
}
.btn:before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position:absolute;
    top:0;
    left:0;
    background-image: url('images/checked.png');
}

— Fernán García de Zúñiga
fonte

0

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.

  <style>
    .btn {
      display: inline-block;
      line-height: 1em;
      padding: .1em .3em .15em 2em
      border-radius: .2em;
      border: 1px solid #d8d8d8;

      background-color: #cccccc;
    }

    .thumb-up {
      background: url('/icons/thumb-up.png') no-repeat 3px center;
    }

    .thumb-down {
      background: url('/icons/thumb-down.png') no-repeat 3px center;
    }
  </style>

  <span class="btn thumb-up">Thumb up</span>
  <span class="btn thumb-down">Thumb down</span>

— Da Beginer
fonte

-2

<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

— alpc
fonte

2

CSS embutido não é apropriado se houver outra opção razoável.

— Jon Mitten

-10

body 
{
background-image:url('image/img2.jpg');
margin: 0px;
 padding: 0px;
}

— Vikash pathak
fonte