拉伸SVG背景图像？

文章/答案/技术大牛

发布

5回答

在chrome浏览器中将svg图像调整为背景大小

html、css、google-chrome、svg

我使用svg图像作为背景，并通过背景大小拉伸SVG图像。我想让它只在宽度方面是正确的。它在火狐，IE9 +上运行的很好，但是chrome。请告诉我怎样才能做到这一点。.homecallouts ul li {background-size: 100% 100%;height: 42px;

浏览 1提问于2013-07-05得票数 11

1回答

防止对SVG模式进行拉伸/ preserveAspectRatio

javascript、html、css、vector、svg

我有一个想要应用模式的svg路径。然而，这个模式似乎是水平拉伸的，我认为我可能应用得不正确。有没有办法确保svg填充模式保持它的比例，就像它是背景一样？<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3

浏览 2提问于2014-02-12得票数 0

2回答

css、svg、background-image

拉伸png背景图像很容易： background: url("../img/curve.png") center center no-repeat;}.stretched-logo-bg/img/curve.svg") center center no-repeat;

浏览 15提问于2016-09-10得票数 6

回答已采纳

1回答

绘制一条不会在图像拉伸时变粗的线

css、svg

在SVG中有没有一种方法可以在图像拉伸时绘制一条保持细长的线条？我使用SVG图像作为CSS背景，如下所示： <line x1="0" y1="15"x2="15" y2="0" color="

浏览 4提问于2012-04-15得票数 21

回答已采纳

1回答

调整背景图像大小以适合容器

css、background-image、aspect-ratio

我想拉伸背景图像(可能没有容器那么大的SVG )以将其拉伸或收缩到容器宽度的100%和容器高度的100%。background-image: url("../img/sky-gradients-01.svg");我想要一些功能类似的东西CSS规则，它“拉伸<

浏览 9提问于2020-05-07得票数 0

1回答

如何创建一个三角形响应背景图像？

css、image、svg、background-image

我想有两个图像作为背景，是对角线分开。我认为最好的选择是使用SVG形状作为剪裁口罩，但我不确定。一直困扰我的问题是，我无法找到一种方法来创建这样的分裂，同时不拉伸这些图像，并始终保持全屏(因此响应)。我的问题/目标:如何制作一个由两个对角线分开的图像组成的页面，这些图像一起形成一个全屏视图，其中图像没有拉伸，分割在两个角

浏览 1提问于2015-11-30得票数 3

回答已采纳

1回答

全宽度SVG，Safari中的舍入错误

svg、safari、rounding-error

在下面的图像中，注意粉红色SVG的左和右是黑色边框：演示：我不想要黑边框。我能想到的一个解决方案是在父容器中添加一个内嵌框阴影，即白色背景的颜色(本质上是覆盖它的颜色)。左/右负1px边距。是否有可能强迫SVG，在Safari中，总是接触容器的边缘，而不是有黑色的缺口？

浏览 1提问于2020-06-16得票数 0

回答已采纳

3回答

拉伸svg背景而不保持高宽比

html、css、image、svg

我想使用svg图像作为背景图像，我想显示整个图像(没有裁剪)，并将图像拉伸到容器div 的100%高度和宽度，而不需要保持原来的高宽比。如果我使用一个png映像，而不是svg，它就会工作。有没有办法用svg做这件事？

浏览 1提问于2015-09-01得票数 2

回答已采纳

4回答

如何制作一个拉伸而不是平铺的SVG背景？

html、css、svg

我有一个想要使用的SVG背景，但我不知道如何让它在整个页面上展开，更不用说作为背景了。有人能帮帮忙吗？ ( W3Schools页面，无论是在SVG上还是在背景上，都没有给我任何帮助)。<object data="background.svg" type="image/svg+xml" width="100%" height="100%">并不完全起作用。

浏览 0提问于2012-07-26得票数 44

1回答

我使用的是SVG背景图片，绝对定位在一些文本后面，并试图给它一个流畅的/可变的纵横比。在Chrome、Firefox等浏览器中，它看起来和预期的一样，但在Safari中，图像的大小不正确。Safari不会像它应该的那样将背景图像拉伸到其元素的全部宽度。我尝试使用object-fit: fill将div替换为带有img标记的背景图像，但结果是相同的:在Safari中没有拉伸，在其他浏览器中也很好。

浏览 19提问于2019-07-17得票数 0

回答已采纳

2回答

调整chrome主题图像大小以适应屏幕大小

google-chrome-extension、resize

有没有办法让chrome主题的背景图像随着窗口的高度调整大小？如果是这样，我是否也可以让图像随着高度调整大小，直到它达到一定的比例，然后再根据窗口的宽度调整大小？

浏览 0提问于2015-10-25得票数 2

回答已采纳

3回答

CSS模糊滤镜在Firefox和IE 10中不起作用，有什么替代方案吗？

html、css、internet-explorer-10、blur

我使用下面的CSS代码来实现blur效果：-webkit-filter : blur(5px);-o-filter : blur(5px);filter : blur(5px);}我也尝试了这个示例，但是对于IE10，没有一个可以工作。

浏览 0提问于2013-08-25得票数 3

回答已采纳

1回答

带有全背景图像的水平滚动体

html、css

我想要一个全宽度的背景(水平滚动)的项目，我正在进行的工作。我添加了以下代码来设置背景： position: absolute; left: 50%; background-size: cover; height: 100%;z-index: -2;这是可行的，但后来我遇到了

浏览 0提问于2018-01-23得票数 0

2回答

CSS SVG图像不调整大小

html、css、svg

我有一个SVG图像，它只是没有显示我想要的方式。这是我使用的CSS代码：min-height: 25vh;background-size

浏览 3提问于2017-12-01得票数 1

回答已采纳

3回答

如何按比例缩放SVG背景图像，使其始终为页脚div的全宽？

html、css、svg

在HTML & CSS中，我很难让图像以我想要的方式缩放。希望可以做到这一点，…我正在开发一个由header, main content div and footer div组成的网站。在footer div中，我尝试将SVG矢量图像设置为背景，因为我还将在这个footer div中插入文本。默认情况下，SVG图像是800 x 240px格式的，但是因为SVG的大小是无限可调的，所以它们将被放大。我想要这个SVG图像按比例<e

浏览 1提问于2012-10-30得票数 1

3回答

固定高度和100%宽度的图像

html、css、svg

我真的不能让这个图像在一个固定的高度100%水平拉伸。我不关心失真，因为它只是一个svg模式。我尝试过使用img-tag和div，并使用svg作为背景，但似乎都不起作用。/images/wave.svg); background-size: auto 50px;<div class="divider

浏览 0提问于2016-03-14得票数 0

2回答

通过拉伸使背景图像覆盖div，而不是保持纵横比

css、sass、background-image

如何通过拉伸使背景图像覆盖div，从而使整个图像始终可见，而不是像background-size: cover那样，宽高比不变？它不是固定的宽度，它必须是响应性的。bottom: 0; height: 100%; background-image: url('/something.svgbackground-repeat: no-repeat; background-position: 0

浏览 29提问于2021-10-27得票数 0

回答已采纳

5回答

基本CSS问题:如何指定div背景图片的高度？

css

我有一个没有完全覆盖div背景的图像。我可以指定图像的高度以使其更大吗？ transparent url(http://www.example.com/picture.jpg) height=??

浏览 1提问于2009-07-08得票数 2

回答已采纳

1回答

显示拉伸的SVG路径的图像模式

svg、background-image

我有一个长方形的div，在这里我添加了一个background-color，和一个带有重复的background-image，这样半透明的图像与背景颜色混合，并为我的内容制作了一个彩色图案的背景。使用生成SVG路径背景图像。使用以下代码： <svg id="curveUpColor" xmlns="http://www.w3.org/2000/svg" version

浏览 4提问于2019-10-12得票数 0

5回答

背景图像CSS的最大大小

html、css、image

我有一个70x50PX框，我有各种图像(SVG文件，所以没有大小)，我想保持他们的纵横比，但一些图像是肖像，有些是景观大小。但它将拉伸肖像图像，使他们更高，所以他们将仍然有正确的高宽比，但顶部和底部将被切断。有什么背景-最大尺寸吗？(或者，我使用背景图像的唯一原因是，您可以对齐图像，水平和垂直，因此可以找到如何在li元素中垂直对齐img元素。)

浏览 0提问于2010-10-29得票数 33

回答已采纳

点击加载更多