将CSS应用于图像标记仅显示下半部分

Question

我有一个图像标签,显示宽度为18像素,高度为36像素的图像.但是,我只想显示图像的底部18 x 18像素,而不是完整的18 x 36像素.如何将标记应用于标记以实现此目的？

编辑:

感谢你的帮助!这是你的几个答案的组合,让我在那里.我发布的最终款式如下 -

div.minus
{
    background-image: url('Images/PlusMinus.gif');
    background-repeat: no-repeat;
    background-position: bottom;
    margin : 0px;
    padding : 0px;
    height: 18px;
    width : 18px;
    overflow : hidden;
}

div.plus
{
    background-image: url('Images/PlusMinus.gif');
    background-repeat: no-repeat;
    background-position: top;
    margin : 0px;
    padding : 0px;
    height: 18px;
    width : 18px;
    overflow : hidden;
}

我尝试了剪辑属性,但没有太多运气,而且我在枪口下截止日期,所以我将不得不在以后更糟糕.再次感谢!

Answer 1

您可以将该图像应用于a的背景,<div>并将该div的高度设置为18像素和背景位置.

.cutoff {
  background: url('image.jpg');
  height: 18px;
  background-position: bottom;
}

Answer 2

我担心你不能(但我猜你永远不应该说永远,所以不要放弃希望).

你有两个涉及更多工作的解决方案:

• 将图像放置在设置为的18x18元素内 overflow:hidden

• 将图像元素转换为使用的18x18元素 background-image