CSS: obraz tła w kolorze tła

Mam panel, który wybrałem na niebiesko, jeśli ten panel jest wybierany (kliknięty). Dodatkowo dodaję do tego panelu mały znak (obraz .png), co oznacza, że wybrany panel był już wcześniej wybrany.CSS: obraz tła w kolorze tła

Więc jeśli użytkownik zobaczy na przykład 10 paneli i 4 z nich ma taki mały znak, to wie, że już wcześniej kliknął te panele. Ta praca jest świetna do tej pory. Problem polega na tym, że nie mogę wyświetlić małego znaku i sprawić, że panel będzie niebieski w tym samym czasie.

Ustawiam panel na niebieski z css background: #6DB3F2; i obraz tła z background-image: url('images/checked.png'). Wygląda jednak na to, że kolor tła znajduje się nad obrazem, więc nie widać znaku.

Czy w związku z tym można ustawić z-index es dla koloru tła i tła?

Źródło

2011-11-19 mkn

185

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

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

Lub można użyć skrótów tła i podać to wszystko w jednym wierszu:

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

Źródło

2011-11-19 16:05:37 dodger

The 1st metoda nie działa dla mnie. Druga, skrótowa metoda działa doskonale. –

Drugi pracował również dla mnie. Dzięki Steve. – starkeen

Pierwszy również mi nie pasował. Drugi zrobił. – felwithe

naprawdę ciekawy problem, haven Jeszcze tego nie widziałem. ten kod działa dobrze dla mnie. Testowałem go w chromie i IE9

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

Źródło

2011-11-19 16:07:04

-8

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

Źródło

2013-08-13 11:02:24

Dla mnie to rozwiązanie nie wyszło:

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

Ale zamiast to dział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%; 
}

Źródło

2014-07-24 21:57:00

Dzięki za kod Francisc !! Jak mówi, dołączenie do koloru tła i obrazu nie rozwiązało problemu także dla mnie. Dzięki tej pomocy i drobnym zmianom w moim kodzie udało mi się rozwiązać problem. – Mikel

Można także użyć krótkiej podstęp używać zarówno obraz i kolor tak: -

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

Źródło

2014-08-16 20:50:11

-2

<li style="background-color: #ffffff;"><a href="/<%=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>

Inne próbki Box Centrum Obraz i kolor tła

1.First clearpixel fix obszar obrazu 2. okno stylu obrazu w stylu centrum 3.li styl tła lub stylu div

Źródło

2014-12-27 07:03:34 alpc

Inline CSS nie jest odpowiedni, jeśli istnieje jakakolwiek inna rozsądna opcja. – Smittles

Na podstawie MDN Web Docs można ustawić wiele usi tła ng stenografia background własność lub poszczególne właściwości za wyjątkiem background-color. W twoim przypadku, można wykonać trick korzystając linear-gradient takiego:

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

Pierwsza pozycja (image) w parametrze zostanie położony na szczycie. Drugi element (kolor tła) zostanie umieszczony pod pierwszym. Możesz także ustawić inne właściwości osobno. 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, można wdrożyć go do innych przypadkach łatwo, na przykład, chcesz, aby kolor niebieski nałożenie obrazu z określonym 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 ustawiane są odpowiednio. Ponieważ obraz jest umieszczany pod nakładką kolorów, jego parametry właściwości są również umieszczane po parametrach nakładki kolorów.

Źródło

2017-12-24 21:16:43 lukibsubekti

A jeśli chcesz wygenerować czarnym cieniem w tle, można użyć następujące:

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

Źródło

2018-01-15 17:12:53

CSS: obraz tła w kolorze tła

Odpowiedz

Powiązane problemy