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屋!