Görüntünün yalnızca bir bölümünü görüntülemek için öğenin arka planı nasıl kliplenir?

Açıklama için aşağıdaki resimlere bakın.
Birincisi elde etmeyi planladığım şey. Her bir tarafta bir tane olmak üzere iki arka plan görüntüsü olan bir metin giriş elemanıdır.
İkinci resim, ihtiyacım olan simgeleri içeren hareketli görüntüdür.
Şimdi benim sorum şu ki, bir görüntünün sadece bir kısmını görüntülemek için bir arka plan resmi kırpmak mümkün mü? Ayrıca, birden fazla arka plan ile kullanmak mümkün mü?Görüntünün yalnızca bir bölümünü görüntülemek için öğenin arka planı nasıl kliplenir?

1 resim:
enter image description here

2 resim:
sizin elemana enter image description here

kaynak

2012-08-15 Hamed Momeni

Ayrı iki kere kullanmak zorunda gidiyoruz Simge görüntüleri şu anda beklediğiniz gibi çalışmak için olsun.

CSS sprite ile arka plan, öğenin boyutuna göre kırpılır, background-clip adlı bir deneysel CSS3 özelliği vardır, ancak istediğiniz şekilde çalışmaz (kenarlıklara, dolgulara veya içeriğe belirli bir boyut değil, kutu.)

Yani iki simge oluşturun, öğenin her iki tarafındaki birini background-position ile kullanın.

As you can see here, bir sprites sayfası ile istediğiniz iki simge yerine tüm arkaplan görüntüsünü gösterecektir. BG görüntülerini istediğiniz şekilde kırpmanın hiçbir yolu yoktur. (bir gün, umarım!)

kaynak

2012-08-15 08:01:34 Kyle

Buraya geldim.Başka yolu olmadığından emin misin? –

Ne yazık ki bu henüz bir yol, henüz bir gün uygulanacak ama şimdilik, 2 ikon bu ile gitmek için tek yoldur :) – Kyle

Umarım o gün yeteri kadar yakında gelir! Teşekkürler. ;) –

Seti (en div diyelim) yor büyük Backgound resim ve ardından background-position ile ayarlayın. Görüntünüz öğe boyutunuz (ör. Div) tarafından kırpılacak.

sizin durumunuzda etrafında olacak:

background-position: -87 -35;

ve div boyutu: CSS3 ile

width: 28px; height: 30px

kaynak

2012-08-15 07:59:49 Samich

Soruyu tekrar okuyun lütfen. Bir giriş elemanım var ve yukarıdaki resimde göründüğü kadar büyük olmasına ihtiyacım var. –

İşte bahsettiğim şey şu: http://jsfiddle.net/jg7C6/3/ – Samich

Şimdi anladım. Teşekkürler. –

bir element için birden fazla arka plan resimleri kullanabilirsiniz. görüntüden belirli bir bölümünü göstermek için background-position özelliğini ayarlamanız gerekir. Ayrıca böyle piksel background-postion tanımlayabilirsiniz

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

: örneğin

kontrol fazla bilgi için

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

bu link

kaynak

2012-08-15 07:59:56 Amyth

Teşekkürler, ama istediğim bu değil. Birden fazla arka plan kullanmayı biliyorum. Benim asıl sorum bir arka plan resmini nasıl takacağımdı. –

Ayrı simgeler kullanmanız gerekecek VEYA giriş kutusunun üstüne yerleştirilmiş 2 ek öğeye (simgeleri göstermek için) sahip olmanız gerekecektir. İkincisi, sprite'ı kullanmanıza izin verecektir.

kaynak

2012-08-15 08:12:01 techfoobar

İkincisi, sprite sayfasının düzenini yeniden sipariş etmeden, sprite'ın ana "input" üzerinde kullanılmasına izin vermez. – Kyle

@KyleSevenoaks - Sprite'ın giriş kutusunun kendisinden değil, overlaid öğelere arka plan olarak uygulanması gerekir. Söylediğiniz gibi, bg bugünün CSS teknolojisi ile kırpılamaz. – techfoobar

Ah, şimdi anladım. Tamam, bu işe yarayacak ama bazı gereksiz işaretleme gerektirecektir. – Kyle

Görüntünün yalnızca bir bölümünü görüntülemek için öğenin arka planı nasıl kliplenir?

cevap

İlgili konular