代码之家  ›  专栏  ›  技术社区  ›  Jagd Dai

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

  •  10
  • Jagd Dai  · 技术社区  · 14 年前

    我有一个图像标签,它显示的图像宽度为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;
    }
    

    我试过“剪辑”属性,但运气不太好,而且我要在最后期限内完成任务,所以以后我将不得不处理它。再次感谢!

    2 回复  |  直到 14 年前
        1
  •  6
  •   Victor Nicollet    14 年前

    恐怕你不能(但我想你永远不应该说不,所以不要放弃希望)。

    您有两个解决方案需要更多的工作:

    • 将图像放入设置为 overflow:hidden

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

        2
  •  8
  •   Novikov    14 年前

    您可以将该图像应用于 <div> 并将该分区的高度设置为18个像素和背景位置。

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