CSS: obraz tła na kolor tła

169

Mam panel, który pokolorowałem na niebiesko, jeśli ten panel jest zaznaczony (kliknąłem na nim). Dodatkowo dodaję mały znak ( .pngobrazek) do tego panelu, który wskazuje, że wybrany panel był już wcześniej wybrany.

Jeśli więc użytkownik widzi np. 10 paneli, a 4 z nich mają ten mały znak, to wie, że już wcześniej klikał na te panele. Jak dotąd działa dobrze. Problem w tym, że nie mogę jednocześnie wyświetlić małego znaku i uczynić panel niebieskim.

Ustawiłem panel na niebieski za pomocą CSS, background: #6DB3F2;a obraz tła za pomocą background-image: url('images/checked.png'). Ale wydaje się, że kolor tła jest powyżej obrazu, więc nie możesz zobaczyć znaku.

Czy w związku z tym można ustawić wartości z-indexdla koloru tła i obrazu tła?

— mkn
źródło

289

Musisz użyć pełnej nazwy właściwości dla każdego:

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

Lub możesz użyć skrótu tła i określić wszystko w jednej linii:

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

— cwaniak
źródło

7

Pierwsza metoda nie zadziałała dla mnie. Druga, skrócona metoda działa doskonale.

— Steve Breese

1

Wartość niebezpiecznego stylu

— Nexeuz

@Nexeuz dlaczego uważasz tę składnię stylu za niebezpieczną Nexeuz?

— Webwoman

31

U mnie to rozwiązanie nie wyszło:

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

Ale zamiast tego zadziałało w drugą stronę:

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

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
źródło

2

Dzięki za kod Francisc !! Jak sam mówi, połączenie koloru tła i obrazu również nie rozwiązało problemu. Dzięki tej pomocy i drobnym zmianom w moim kodzie udało mi się rozwiązać problem.

— Mikel

17

A jeśli chcesz wygenerować czarny cień w tle, możesz użyć:

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

— Risa__B
źródło

5

Bazując na MDN Web Docs , możesz ustawić wiele tła za pomocą backgroundwłaściwości skróconej lub pojedynczych właściwości z wyjątkiem background-color. W twoim przypadku możesz zrobić sztuczkę, używając w linear-gradientten sposób:

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

Pierwsza pozycja (obraz) parametru zostanie umieszczona na górze. Drugi element (kolorowe tło) zostanie umieszczony pod pierwszym. Możesz również ustawić inne właściwości indywidualnie. Na przykład, aby ustawić rozmiar i położenie obrazu.

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

Zaletą tej metody jest to, że możesz ją łatwo zaimplementować w innych przypadkach, na przykład chcesz, aby niebieski kolor nakładał się na obraz z pewnym kryciem.

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;

Poszczególne parametry właściwości są ustawiane odpowiednio. Ponieważ obraz jest umieszczony pod nakładką koloru, jego parametry właściwości są również umieszczane po parametrach nakładki koloru.

— Luki B. Subekti
źródło

2

naprawdę ciekawy problem, jeszcze go nie widziałem. ten kod działa dobrze dla mnie. przetestowałem to w Chrome i IE9

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

— Ramzi Khahil
źródło

2

Możesz także użyć krótkiej sztuczki, aby użyć obrazu i koloru w ten sposób: -

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

— Kesar Sisodiya
źródło

1

To faktycznie działa dla mnie:

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

Możesz także upuścić jednolity cień i ustawić obraz tła:

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

Jeśli pierwsza opcja z jakiegoś powodu nie działa i nie chcesz używać cienia pola, zawsze możesz użyć pseudoelementu dla obrazu bez dodatkowego kodu HTML:

.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
źródło

0

Oto jak stylizowałem moje kolorowe przyciski z ikoną w tle

Użyłem właściwości „background-color” dla koloru i właściwości „background” dla obrazu.

  <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
źródło

-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>

Inny przykładowy obraz i kolor tła

1.Pierwszy obszar poprawiania obrazu clearpixel 2. styl środkowy obszar obrazu, pole 3.li styl koloru tła lub div

— alpc
źródło

2

Wbudowany CSS nie jest odpowiedni, jeśli istnieje inna rozsądna opcja.

— Jon Mitten

-10

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

— Vikash pathak
źródło