如何通过 CSS 让背景图像/图像拉伸以填充容器?
Posted
技术标签:
【中文标题】如何通过 CSS 让背景图像/图像拉伸以填充容器?【英文标题】:How to get background image/ image to stretch to fill container via CSS? 【发布时间】:2012-09-18 02:09:24 【问题描述】:我有一个比例矢量图像,我希望它填充一个容器。 SO上有几个这样的问题,尽管它们有点老了。例如。 Stretch and scale CSS background
但是,当我尝试实施此类解决方案时,结果令人失望。
例如:
body
margin: 0;
padding: 0;
text-align: center;
color: #000;
background-color: #000
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
...
.twoColLiqLtHdr #container
width: 80%;
margin: 0 auto;
border: 2px solid #000000;
text-align: left;
background-color: #003;
background-image: url('background_image.svg');
/*background-position: 80% 80%; */
background-repeat: no-repeat;
color: #000;
font-family: "Times", cursive;
background-attachment:fixed;
min-height:100%;
/*top: 0;
left: 0; */
我尝试了各种安排,但我无法在不留空白区域的情况下使其伸展(重复在某种程度上是成功的,但看起来很糟糕)。
但是,由于我正在使用 svg,我是否以错误的方式处理此问题,我是否应该在 html 中使用 svg xmlns 标签? (P.S. 我知道 IE8 绝对无法处理 svgs)
【问题讨论】:
【参考方案1】:你试过了吗
background-size:cover;
检查一些examples。
我在使用 webkit、background-size:cover
和 SVG 背景图像时遇到了问题。我解决了它添加
-webkit-background-origin:border;
【讨论】:
谢谢。 cover 成功覆盖了容器。然而,奇怪的是,图像过于“放大”,以至于只有图像的上半部分可见。 o.O 因为我已经修复了图像,所以无法看到图像的其余部分...... 你不再需要background-attachment:fixed;
,因为它会覆盖整个高度!
这让我有点莫名其妙 - 但是当不再固定时,背景图像似乎完全消失了! :p【参考方案2】:
您可能需要添加 preserveAspectRatio="none" 作为 SVG 图像本身的外部 <svg>
元素的属性。
如果不想修改图片文件可以试试
背景图片: url('background_image.svg#svgView(preserveAspectRatio(none))');
Firefox 15 将支持这一点,可能还会支持其他 UA。
【讨论】:
不错,很有用。如果可能的话,我如何将它与基于 base64 编码的内联 SVG 一起使用? 我在转换为 base64 之前将属性添加到了我的 SVG 中,它就像一个魅力。谢谢@RobertLongson! 非常感谢。你和 preserveAspectRatio="none" 拯救了我的一天。 :) 爱你。爱你,爱你,爱你,爱你,爱你,爱你,爱你,爱你……以上是关于如何通过 CSS 让背景图像/图像拉伸以填充容器?的主要内容,如果未能解决你的问题,请参考以下文章