div元素范围外的图像不可见 [英] Image invisible outside div element bounds

问题描述

如何使div元素(包含该元素)之外的图像的一部分不可见?

例如，我有:高度为200像素的div.imageContainer，div内(圆圈)的图像，200x200像素，图片(圆圈)的上半部分位于div.imageContainer中

当前如下:

  div.imageContainer{职位:相对}div.imageContainer img{位置:绝对；顶部:100px；} 

但是，在div元素外部的下半部分是可见的，并且与下面的其他几个元素重叠(我正在尝试构造一个测试横幅).如何将图像的 part 隐藏在元素外部?

解决方案

溢出:隐藏

在父div内应该可以解决问题

How does one make part of the image outside div element (in which it is contained) invisible?

For example, I have: div.imageContainer of 200 pixels in height, image (of circle) inside the div, 200x200 pixels, the top half of image (circle) is inside the div.imageContainer

Currently, it is as follows:

div.imageContainer
{
position: relative;
}
div.imageContainer img
{
position: absolute;
top: 100px;
}

However, the bottom half which is outside the div element is visible and overlapping few other elements below (I'm trying to construct a test banner). How do i go about hiding the part of the image outside of the element?

解决方案

overflow: hidden inside the parent div should do the trick

这篇关于div元素范围外的图像不可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！