在做页面开发时, 我们有时会使用图片来为页面做背景, 如果有时只需要使用图片的部分来做背景, CSS 如何处理? 下面我们来看一下.
先在 html 里创建一个 div, 用来放背景图片的.
为 div 添加 CSS 样式, 添加背景图片 url.
刷新页面, 可以看到现在是整张图片都显示的.
假设我们现在需要只显示图片中人物的头像部分, 我们需要修改图片的长度和宽度, 设置为头像部分的大小, 70 元素左右.
然后添加一个 background-position 的样式, 为样式添加适当的值. 注意的是这个值是负数的, 不同的值会显示图片的不同部分, 大家可以调整尝试一下.
重新刷新页面, 可以看到现在是只显示了图片上的头像部分了.
如果是图片太大, 但容器太小, 我们要显示完整的图片, 可以使用 background-size 的样式, 如图.
运行页面后, 我们的容器上就显示了完整的背景图片了, 但对图片进行了缩放的.
更多 web 前端 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/17476.html