0

所以我希望能够只显示一个元素的一半。现在我可以执行以下操作：

function half($elem,which){
    //here I would get the scrolling position
    //of the element $elem along with the outer
    //width and outer height. Then, depending on
    //what 'which' is (left,right,top,bottom), the
    //function would append an element with the same
    //background color as the body background in
    //order to cover the correct part of the element
};

但这只是向 DOM 添加额外的项目，如果在一些简单的 css 或 javascript 中，我可以将其设置为仅显示（或剪切）元素的一部分，则这是不必要的。那可能吗？如果是这样，怎么做？

更新：

在你们所有人都试图猜测之后，这是一个不断将内容附加到容器的小提琴。要回答我的问题，您需要有一个函数来更改要附加的特定 div 的 css，以便它只附加指定的一半内容

4

3 回答 3

1

我的意思是根据您提供的少量信息很难猜测，但这样的事情应该有效：

.ElementContainer {
    width:500px; /* example, random number */
    overflow:hidden; /* important part */
}

.Element {
    width:200%; /* relative to parent, so double the width of parent */
}

然后就像这样：

<div class="ElementContainer">
    <img src="whatever.jpg" alt="" class="Element" />
</div>

那应该只显示从左边开始的前半部分。如果你想做...中半部分什么的，你需要使用定位：

.ElementContainer {
    position:relative; /* must declare position of parent */
    width:500px;
    height:200px; /* since child is removed from DOM, it will be 0 height unless declared explicitly */
    overflow:hidden;
}

.Element {
    width:200%;
    position:absolute;
    top:0; /* always declare both X & Y */
    left:-25%; /* can be any negative % you want, this is just an example */
}

这将做这种居中的外观......你可以从这里运行它，应该给你一个选项的想法。

于 2013-06-24T19:57:25.387 回答
1

在CSS中特定像素高度后很容易切断，假设你想垂直切割，如果你想水平切割替换宽度：

.restricted {overflow: hidden; height: 45px; }

看到这个jsfiddle：http: //jsfiddle.net/jrvf7/

如果您事先不知道元素的高度，则在恰好一半元素后切断，将需要一些 javascript。请参阅其他提交的答案。不过，如果可能的话，我建议你走我的 CSS 路线。

于 2013-06-24T20:00:26.733 回答
-1

你想要切成两半的东西有点模糊，但我会从

background-size:cover;
于 2013-06-24T19:59:36.363 回答