使用 css 将 SVG 粘贴到屏幕的右下角答案

【问题标题】：Stick SVG to bottom right of screen using css使用 css 将 SVG 粘贴到屏幕的右下角
【发布时间】：2017-02-25 14:29:21
【问题描述】：

名为 .svgImage 的 CSS 类应用于页面上的 <div>。每次我调整浏览器窗口的大小时，svg 图像都会正确调整大小，但它会一直在页面上移动。

例如，使浏览器窗口垂直变小会使 svg 图像向上移动。水平方向更小会将 svg 向左移动。

svg 图像需要保持在右下角。把 svg 文件想象成一个四角的正方形，右下角应该贴在页面的右下角。

这是要粘贴的 div 的 CSS：

.foo {
  background: url(images/GraphicElementDesktop.svg);
  opacity: 1;
  height: 45%;
  width: 33%;
  position: absolute;
  background-repeat: no-repeat;
  right: 0px;
  bottom: 0px;
  z-index: 5000;
  filter: alpha(opacity=25) progid:DXImageTransform.Microsoft.Alpha(opacity=25);
}

有什么办法可以解决这个问题吗？

提前致谢！

【问题讨论】：

为什么会被否决？至少有人可以在投票之前告诉我吗？我看不到任何违反 SO 规则的内容。
你也可以添加 HTML
@TobiObeck 除了类被添加到正文中的 div 之外，没有任何 html。 :)
您的问题并不清楚。
寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Complete, and Verifiable example

标签： javascript html css svg web

【解决方案1】：

你必须添加

background-position: right bottom;

工作小提琴https://jsfiddle.net/411dxm1n/1/

【讨论】：

抱歉，我现在已经编辑了 CSS。现在请看一下？
天哪，是的！非常感谢！