css – 使用overflow-y:hidden或overflow-x:hidden只隐藏元素的一边

前端之家收集整理的这篇文章主要介绍了css – 使用overflow-y:hidden或overflow-x:hidden只隐藏元素的一边前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
标题几乎问了这个问题但是我知道使用overflow-y:hidden和overflow-x:隐藏你可以隐藏元素的顶部和底部或左边和侧面但是有一种方法只能隐藏一边使用这些选择者.

特别是我有兴趣隐藏一个溢出但不是顶部的div的底部.

如果没有,是否有任何其他CSS只能实现这种预期的效果

有一个合法的目的需要这个,我想看看是否有一种标准的方法来做到这一点.

为了稍微解释一下,我只能控制幻灯片的CSS,我需要将幻灯片div中的一个元素推到div上方,但是溢出:隐藏值会在我执行此操作时切断这个推升的div.我可以删除溢出:当然完全隐藏,但那不是一个非常好的幻灯片

下面是一个小提琴:

https://jsfiddle.net/ejhyz7t3/

解决方法

基于问题中的示例的下面的jsfiddle提供了使用剪辑仅切除底边的期望效果

https://jsfiddle.net/ejhyz7t3/2/

完整代码复制如下以供参考:

HTML

<div class="outer-container">
   <div class="inner-container">
   </div>
</div>

CSS

.outer-container {
  background: red;
  height: 100px;
  margin-top: 100px;
  width: 150px;
  padding-left: 50px;
}

.inner-container {
  background: green;
  height: 200px;
  width: 100px;
  transform: translateY(-50px);
  position: absolute;
  clip: rect(0,100px,150px,0);
}
原文链接:https://www.f2er.com/css/214985.html

猜你在找的CSS相关文章