如何拉伸背景图像以覆盖整个 HTML 元素?
我正在尝试获取 HTML 元素(body、div 等)的背景图像以拉伸其整个宽度和高度。
运气不太好。 是否有可能,或者除了背景图像之外我还必须以其他方式做到这一点?
我当前的 CSS 是:
body {
background-position: left top;
background-image: url(_images/home.jpg);
background-repeat: no-repeat;
}
编辑:我不热衷于维护 Gabriel 建议中的 CSS,所以我正在更改页面的布局。 但这似乎是最好的答案,所以我将其标记为这样。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(14)
使用
background-size
属性:http: //www.w3.org/TR/css3-background/#the-background-sizeUse the
background-size
property: http://www.w3.org/TR/css3-background/#the-background-size简而言之,你可以尝试这个......
我使用了很少的 css 和 js...
它对我来说工作得很好。
In short you can try this....
Where I have used few css and js...
And it is working fine for me.
不确定是否可以拉伸背景图像。 如果您发现在所有目标浏览器中这是不可能的或不可靠,您可以尝试使用拉伸的 img 标签,并将 z-index 设置为较低,并将位置设置为绝对,以便其他内容显示在其顶部。
让我们知道您最终会做什么。
编辑:我的建议基本上是加布里埃尔链接中的内容。 所以尝试一下:)
Not sure that stretching a background image is possible. If you find that it's not possible, or not reliable in all of your target browsers, you could try using a stretched img tag with z-index set lower, and position set to absolute so that other content appears on top of it.
Let us know what you end up doing.
Edit: What I suggested is basically what's in gabriel's link. So try that :)
要扩展@PhiLho答案,您可以将一个非常大的图像(或任何尺寸的图像)放在页面上的中心:
或者您可以使用一个较小的图像,其背景颜色与图像的背景相匹配(如果它是纯色) )。 这可能适合也可能不适合您的目的。
To expand on @PhiLho answer, you can center a very large image (or any size image) on a page with:
Or you could use a smaller image with a background color that matches the background of the image (if it is a solid color). This may or may not suit your purposes.
如果您需要在调整屏幕大小时拉伸背景图像,并且不需要与旧版浏览器版本兼容,则可以使用以下方法:
If you need to stretch your background image while resizing the screen and you don't need compatibility with older browser versions this will do the work:
如果您有大的横向图像,此示例会在纵向模式下调整背景大小,使其显示在顶部,而底部留空:
If you have a large landscape image, this example here resizes the background in portrait mode, so that it displays on top, leaving blank on the bottom:
我主要使用以下代码来实现所要求的效果:
The following code I use mostly for achieving the asked effect:
这个对我有用
It works for me
这是我的代码中的一个示例:
Here is an example from my code:
你不能在纯 CSS 中。 在所有其他组件后面覆盖整个页面的图像可能是您最好的选择(看起来这就是上面给出的解决方案)。 无论如何,很可能它看起来会很糟糕。 我会尝试使用足够大的图像来覆盖大多数屏幕分辨率(例如高达 1600x1200,高于它的图像较少),以限制页面的宽度,或者仅使用平铺的图像。
You cannot in pure CSS. Having an image covering the whole page behind all other components is probably your best bet (looks like that's the solution given above). Anyway, chances are it will look awful anyway. I would try either an image big enough to cover most screen resolutions (say up to 1600x1200, above it is scarcer), to limit the width of the page, or just to use an image that tile.
图像{
image{
只需将 div 设为 body 的直接子元素(例如类名 bg),包含 body 中的所有其他元素,并将其添加到 CSS 文件中:
请参阅此链接:https://www.w3schools.com/css/css_rwd_images.asp
向下滚动到显示以下内容的部分:
无论您如何调整大小,它都会显示“img_flowers.jpg”拉伸到屏幕或浏览器的大小它。
Simply make a div to be the direct child of body (with the class name bg for example), encompassing all other elements in the body, and add this to the CSS file:
Refer to this link: https://www.w3schools.com/css/css_rwd_images.asp
Scroll down to the part that says:
There it shows the 'img_flowers.jpg' stretching to the size of the screen or browser regardless of how you resize it.