Jak przyciąć tło elementu, aby wyświetlić tylko jego część?

Aby uzyskać wyjaśnienie, spójrz na następujące obrazy.
Pierwszy to, co zamierzam osiągnąć. Jest to element wprowadzania tekstu z dwoma obrazami tła, po jednym z każdej strony.
Drugie zdjęcie to obraz ikonki zawierający ikony, których potrzebuję.
Teraz moje pytanie brzmi: czy można przyciąć obraz tła, aby wyświetlić tylko część obrazu? Co więcej, można go używać z wieloma środowiskami?Jak przyciąć tło elementu, aby wyświetlić tylko jego część?

1-ty image:
enter image description here

2 zdj:
enter image description here

Źródło

2012-08-15 Hamed Momeni

Będziesz musiał użyć dwóch oddzielnych obrazy ikon, aby to działało zgodnie z oczekiwaniami.

W przypadku ikonek CSS tło jest obcięte przez rozmiar elementu, istnieje eksperymentalna właściwość CSS3 o nazwie background-clip, ale nie działa tak, jak tego chcesz (zostanie przycięta do granic, dopełnienia lub zawartości box, a nie konkretny wymiar.)

Stwórz więc dwie ikony, użyj po jednej z każdej strony elementu przy pomocy background-position.

As you can see here, z arkuszem sprite wyświetli cały obraz tła zamiast dwóch ikon, które chcesz. Nie ma jeszcze sposobu, aby przyciąć obrazy BG w sposób, który chcesz. (jeden dzień, mam nadzieję!)

Źródło

2012-08-15 08:01:34 Kyle

Oto, co wymyśliłem.Czy na pewno nie ma innego sposobu? –

Niestety jest to jedyny sposób jak na razie, może pewnego dnia zostanie on wdrożony, ale na razie tylko 2 ikony to jedyny sposób, aby to osiągnąć :) – Kyle

Mam nadzieję, że ten dzień wkrótce nadejdzie! Dzięki. ;) –

Zestaw do elementu (powiedzmy div) Yor duży obraz backgound a następnie dostosować się background-position. Twój obraz zostanie przycięty przez twój rozmiar elementu (np. Div).

w Twoim przypadku będzie to około:

background-position: -87 -35;

i div rozmiar:

width: 28px; height: 30px

Źródło

2012-08-15 07:59:49 Samich

Ponownie przeczytaj pytanie. Mam element wejściowy i potrzebuję go tak dużego, jak pokazano na powyższym obrazku. –

Oto, o czym mówię: http://jsfiddle.net/jg7C6/3/ – Samich

Dostaję to teraz. Dzięki. –

z CSS3 można korzystać z wielu obrazów tła dla elementu. Aby wyświetlić określoną część z obrazu, musisz ustawić jego właściwość background-position.

na przykład:

background-image: url(sprites.png), url(sprites.png); 
background-position: center bottom, left top;

Można również zdefiniować background-postion w pikselach jak:

background-position: -5px 10px, -35px 10px;

uzyskać więcej informacji, sprawdź to link

Źródło

2012-08-15 07:59:56 Amyth

Dzięki, ale nie o to pytałem. Wiem, jak korzystać z wielu środowisk. Moje główne pytanie dotyczyło przycinania obrazu tła. –

Będziesz musiał użyć oddzielnych ikon LUB będziesz musiał mieć 2 dodatkowe elementy (do wyświetlania ikon) nałożone na górę pola wprowadzania. Ten ostatni pozwoli ci użyć samego duszka.

Źródło

2012-08-15 08:12:01 techfoobar

Te ostatnie nie pozwoliłyby na użycie sprite'a na głównym "wejściu" bez zmiany układu arkusza sprite. – Kyle

@KyleSevenoaks - Sprite musi być zastosowany jako tło do elementów nałożonych, a nie do samego pola wejściowego. Ponieważ, jak już powiedziałeś, bg nie może być obcinany dzisiejszym technikiem CSS. – techfoobar

Ah, teraz dostaję ciebie. Ok, to by działało, ale wymagałoby niepotrzebnych znaczników. – Kyle

Jak przyciąć tło elementu, aby wyświetlić tylko jego część?

Odpowiedz

Powiązane problemy