相关疑难解决方法(0)

有没有办法让CSS中的背景拉伸或缩放以填充其容器？

我有

body {
    background: url(images/background.svg);
}

期望的效果是该背景图像的宽度等于页面的宽度,高度变化以保持比例.例如,如果原始图像恰好是100*200(任何单位)且正文宽度为600px,则背景图像最终应为1200px高.如果调整窗口大小,高度应自动更改.这可能吗？

目前,Firefox看起来正在调整高度,然后调整宽度.这可能是因为高度是最长的尺寸而且它试图避免裁剪？我想垂直裁剪,然后滚动:没有水平重复.

此外,Chrome将图像置于中心,不重复,即使background-repeat:repeat明确给出,这仍然是默认值.

是否有任何已知的方法使CSS样式background-size在IE中工作？

我使用svg图像作为背景.我正在尝试使用CSS3,background-size: 100% 100%;但它似乎不起作用,即使在应该支持它的浏览器中(如Chrome).

如果你看这个网站,你会看到#special-post article(在食物图像的右下方)有一个红色的横幅背景.请注意,当您向下缩小窗口时,背景图像的高度会下降以保留其比例,而不是按照我的意愿拉伸.

编辑:我在FireFox上检查了它,它工作正常...所以这似乎是一个webkit问题.

编辑:我在Safari上检查了它,它的工作原理!所以看起来我的问题是针对Chrome的.

(PS:我熟悉这种替代解决方案,使用img标签,但我宁愿不使用它.)

我试图弄清楚如何垂直拉伸背景图像.我通过以下方式使用CSS3和3个图像:

background-image: url("left.png"), url("right.png"), url("center.png")
background-repeat: no-repeat, no-repeat, repeat-x
background-position: top left, top right, top

现在我想垂直拉伸这些图像,使它们一直延伸到底部.有没有办法做到这一点？

我刚开始在一个网站上,我已经遇到一个小问题,我找不到具体的解决方案.

我想让我的网站背景适合任何屏幕尺寸的宽度,高度无关紧要.

这是我的图像的链接:

    ../IMAGES/background.jpg

编辑

我不知道什么是错的,但由于某种原因,身体甚至不想得到背景图像.它只显示纯白色背景.

body
{background-image:url(../IMAGES/background.jpg);}

大家好,我正试图拉伸我的背景以适应宽度.我只在互联网上找到了大的解决方法.这个没有一个命令吗？

body {
    background-image: url(money.jpg); 
}

谢谢你的回答.Doonot

我想通过使用样式定义在React.js中添加背景图像,它的工作原理如下:

let imgUrl = 'images/berlin.jpg'    
let styles = {
        root: {
            backgroundImage: 'url(' + imgUrl + ')',
            overflow: 'hidden',
        },
        ...

如您所见,图像在x方向上重复.所以我想扩展它:

let imgUrl = 'images/berlin.jpg'
let styles = {
    root: {
        backgroundImage: 'url(' + imgUrl + ')',
        backgroundImage: {
            flex: 1,
            resizeMode: 'cover', // or 'stretch'
        },
        overflow: 'hidden',
    },
    ...

但图像不再加载:

那么如何在React.js中设置背景图像并进行调整呢？

使用background-size: cover我能够使背景拉伸适合页面的整个宽度.

使用repeat-y我可以使背景重复或垂直平铺到页面的整个高度.

有没有办法将这两种效果结合起来？不幸的是,他们似乎没有合作(至少在Chrome中).似乎我可以在两个方向上background-size: cover拉伸,或者不沿x方向拉伸,而是沿y方向重复.

编辑:使用background-size: 100% Npx(其中N是图像的高度)我可以完成上述操作,但它会使背景图像偏斜,因为它只在一个方向上拉伸.有没有办法让它按比例缩放？

我有一个大图像用作background-image页面.我想要的是图像的高度将被拉伸以填充页面的高度.它也应该集中.

background: black url("/image/background.jpg") no-repeat fixed center;