如何将图像精灵放置在高度未知的元素的底部 [英] How to position an image sprite at the bottom of an element of unknown height

问题描述

我使用的图像精灵包含四个子图像":div元素的四个角.子画面为40px x 40px.每个子图像"为20px x 20px.每个角的子图像都位于精灵上与dev元素相同的位置的相对角.例如，左上角的子图像位于精灵的右下角.

I am using an image sprite that consisting of four "sub-images": four corners for a div element. The sprite is 40px by 40px. Each "sub-image" is 20px by 20px. Each corner's "sub-image is on the opposite corner of the sprite of where it would be on the dev element. For example, the top-left sub-image is at the bottom-right of the sprite.

此div元素的宽度为440px，高度为100％.我的顶角向下了，但是我怎么弄底角呢?有没有办法在不创建新精灵的情况下做到这一点?这是到目前为止我的CSS规则.

This div element is 440px wide and 100% tall. I've got the top corners down but how do I get the bottom corners? Is there a way to do this without creating a new sprite? Here is what I've got so far for my CSS rule.

background: -20px -20px no-repeat url(<path>), 420px -20px no-repeat url(<path>);

推荐答案

将background-images放在absolute定位的伪元素上.

Put background-images on absolutely positioned pseudo-elements.

演示

对不起，您的问题有误，这里是带有'sprite'的相同技术:

Sorry, misread your question, here is the same technique with a 'sprite':

演示

这篇关于如何将图像精灵放置在高度未知的元素的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！