哎呀，你们了解吗？写网页的时候时常遇到个问题。 背景图片放上去，最终还是结果是背景颜色有点儿没遮住图片，看着不太舒服。 这事儿啊，挺让人烦的。 什么鬼？ 别担心！今天我就来给你们讲讲怎么用 CSS 的 `overflow: hidden` 来解决当前这个问题。听我缓慢缓慢道来。

啥情况啊？为哪些背景颜色会超出图片？

先来看咱们得明白个事儿。 在网页设计里我们时常需要把背景颜色和图片结合起来采用。 但是有时候呢，这是因为各种原因，引起背景颜色会超出图片的边界。 这时候呢，咱们就得想办法把更多余的一部分给藏起来，中肯。。

简洁来说呢 ，就像你穿衣服一样。 如果一件衣服太较长了 ，你总得把它塞进裤子里吧？ 背景颜色超出图片的边界 ， 从一个旁观者的角度看... 就跟衣服太较长一样 ，咱们得把更多余的一部分给“藏”起来 。

`overflow: hidden` 是怎么回事？

良好了 ，沉重点来了！ `overflow: hidden` 就是一个 CSS 的属性 ，它能够用来裁剪超出容器边界的内容 。 你能够把它想象成一个神奇的剪刀 ，只要有东西超出容器的范围 ，它就会直接把更多余的一部分给剪掉 。是不是很厉害呀？

举个例子

下面我给你们看一个简洁的例子 ，让你们更良好地明 基本上... 白 `overflow: hidden` 的用法。

阐述一下代码

• `.container`： 这是我们用来控制整体布局的容器。
• `.hidden-container`: 这是我们需要隐藏一一部分内容的容器, 它控制着背景色的体现范围
• `.background-image`: 当前这个是用来设置背景图片的元素的类名

运行最终还是结果是怎么样？

注意哦 , 你需要把这里的链接改成你自己的图片的链接!，太暖了。

一下

1. 用 `overflow : hidden` 能够很方便地控制背景颜色只体当前图片的范围内
2. 记住要先把要裁剪的内容放到一个容器里面
3. 更多尝试几遍,就能熟练掌握了!