是否有一种方法来获得CSS的背景拉伸或缩放以填充它的容器?
当前回答
定义“延伸和规模”…
If you've got a bitmap format, it's generally not great (graphically speaking) to stretch it and pull it about. You can use repeatable patterns to give the illusion of the same effect. For instance if you have a gradient that gets lighter towards the bottom of the page, then you would use a graphic that's a single pixel wide and the same height as your container (or preferably larger to account for scaling) and then tile it across the page. Likewise, if the gradient ran across the page, it would be one pixel high and wider than your container and repeated down the page.
通常,当容器增大或缩小时,为了给人一种它拉伸填充容器的错觉,您可以使图像比容器更大。任何重叠都不会显示在容器的边界之外。
If you want an effect that relies on something like a box with curved edges, then you would stick the left side of your box to the left side of your container with enough overlap that (within reason) no matter how large the container, it never runs out of background and then you layer an image of the right side of the box with curved edges and position it on the right of the container. Thus as the container shrinks or grows, the curved box effect appears to shrink or grow with it - it doesn't in fact, but it gives the illusion that is what's happening.
至于真正让图像随着容器一起缩小和增大,您需要使用一些分层技巧来使图像看起来像一个背景,并使用一些javascript来调整它与容器的大小。目前没有办法用CSS做到这一点…
如果你使用矢量图形,恐怕就超出了我的专业领域。
其他回答
一句话:不。拉伸图像的唯一方法是使用<img>标记。你必须要有创造力。
在2008年,当答案写出来的时候,这曾经是正确的。如今,现代浏览器支持背景大小,这就解决了这个问题。注意,IE8不支持它。
使用border-image: yourimage属性来设置你的图像,并将其放大到屏幕或窗口的整个边界。
我想指出,这相当于做:
html { width: 100%; height: 100%; }
body { width: 100%; height: 100%; /* Add background image or gradient to stretch here. */}
另一个很好的解决方案是robbin的Backstretch,它可以应用于页面的主体或任何元素- http://srobbin.com/jquery-plugins/backstretch/
目前还没有。它将在CSS 3中可用,但要在大多数浏览器中实现还需要一段时间。
推荐文章
- 在notepad++中格式化代码
- 表单中包含表单,可以吗?
- 如何创建表只使用<div>标签和Css
- html5 - canvas元素-多层
- 如何确保<select>表单字段被禁用时提交?
- 如何在HTML文本换行?
- 如何在JavaScript中转义单引号(')?
- Chrome开发工具:如何找出什么是覆盖CSS规则?
- 如何使用HTML/CSS在文本中插入空格/制表符
- 用背景图像填充SVG路径元素
- 将JSON显示为HTML
- HTML被认为是一种编程语言吗?
- 如何修复favicon.ico错误:“Failed to load resource: net::ERR_EMPTY_RESPONSE”
- 大Glyphicons
- 这个CSS是如何产生一个圆的?