html 背景图片拉长,关于html：拉伸背景图片CSS？

单元格中拉伸background-image

请注意，拉伸栅格图像会降低质量。

stackoverflow.com/questions/376253/的副本

@wdm：如果它是svg，则不会发生质量下降。

.style1 {

background: url(images/bg.jpg) no-repeat center center fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

适用于：

Safari 3+

Chrome Whatever +

IE 9+

Opera 10+(Opera 9.5支持背景大小，但不支持关键字)

Firefox 3.6+(Firefox 4支持非供应商前缀版本)

另外，您可以尝试此方法来解决IE解决方案

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');

-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

zoom: 1;

感谢Chris Coyier的这篇文章

这个工作很好，但我只想拉伸高度，我该怎么做

感谢您的帮助，当我在您的代码-moz-background-size: 100% 100%;中更改它时，它可以正常工作...谢谢

另一个IE8和更低版本的解决方案：github.com/louisremi/background-size-polyfill

将background-size: cover;更改为`background-size：100％100％;`对我有用

我需要固定高度(130px)和全宽。这可行：background: url("imagesbg.jpg") no-repeat center 0 fixed;和background-size: 100% 130px;(等)。如果高度足够短，则将高度居中(如答案中所示)将隐藏背景。

CSS3：http：//webdesign.about.com/od/styleproperties/p/blspbgsize.htm

.style1 {

...

background-size: 100%;

}

您可以使用以下命令指定宽度或高度：

background-size: 100% 50%;

这将拉伸它的宽度的100％和高度的50％。

浏览器支持：http://caniuse.com/#feat=background-img-opts

对不起，不行！！

在哪个浏览器中？

它适用于IE11，Edge，Firefox，Chrome。

嗯在Chrome中尝试过。不工作。

哇，对我来说效果很好-我尝试了其他答案以及一系列不同的技巧。但这是如此简单，并且可以立即生效。谢谢：D

您无法拉伸背景图片(直到CSS 3)。

您将必须使用绝对定位，这样才能将图像标签放在单元格内并拉伸以覆盖整个单元格，然后将内容放在图像顶部。

table {

width: 230px;

}

.style1 {

text-align: center;

height: 35px;

}

.bg {

position: relative;

width: 100%;

height: 100%;

}

.bg img {

display: block;

width: 100%;

height: 100%;

}

.bg .linkcontainer {

position: absolute;

left: 0;

top: 0;

overflow: hidden;

width: 100%;

}

Answer

+1，正确。用position: relative;和最大宽度/高度的包装也是一个好主意。 TD本身并非在所有浏览器中都相对放置(如果有)。

你能给我提供代码试试吗

@Buffon：这是一个示例：jsfiddle.net/ZxNsM

我在IE上苦苦挣扎，为此+1

我想你要找的是

.style1 {

background: url('http://localhost/msite/images/12.PNG');

background-repeat: no-repeat;

background-position: center;

-webkit-background-size: contain;

-moz-background-size: contain;

-o-background-size: contain;

background-size: contain;

}

这正是我所需要的！

This works flawlessly @ 2019

.marketing-panel  {

background-image: url("../images/background.jpg");

background-repeat: no-repeat;

background-size: auto;

background-position: center;

}

只需将其粘贴到您的代码行中：

Copyright ©  码农家园