仅使用CSS在页脚左侧添加SVG

ryoqjall 于 2023-04-08 发布在其他

关注(0)|答案(2)|浏览(121)

说法语的人为语法错误或拼写错误的单词道歉
嗨，我的大学在作业中问了一个奇怪的问题。他们要求只使用CSS在页脚的左侧添加一个SVG（SVG文件不在HTML中，我必须在CSS文件中添加它）。我尝试在CSS中使用footer::before，但SVG太大了，如果我尝试缩放它，它只会在页脚之外。
以下是我尝试的完整代码：

footer{
  height:50px;
  margin-top:10px;
  background-color:rgba(120,120,0,0.6);
}
footer::before {
  content: url(https://img.uefa.com/imgml/uefacom/ucl/2021/logos/logo_dark.svg);
  float: left;
  scale: 0.1;
}
body {
  background: black;
}

<footer>
  <strong>Projet TW1 2023 : ma petite compo</strong><br> données issues de <a href="https://www.uefa.com/uefachampionsleague/" target="_blan ">uefa.com</a>
</footer>

请注意，我不能删除或修改footer{}的现有规则，我只能添加新规则。
我还尝试直接添加content: url("data:image/svg+xml;<svg>...</svg>")的svg代码，但我无法让它工作
截图：

它应该是：

谢谢

css

来源：https://stackoverflow.com/questions/75953017/add-svg-on-the-left-of-the-footer-using-only-css

2条答案

按热度按时间

6yt4nkrj1#

我能得到的最接近的是使用transform: scale(10%);并设置display: inline-block;和transform-origin: bottom left;而不是float:left;和scale: 0.1;

footer::before {
  content: url(https://img.uefa.com/imgml/uefacom/ucl/2021/logos/logo_dark.svg);
  display: inline-block;
  transform: scale(10%);
  transform-origin: bottom left;
}

body {
  background: lightgreen;
}

<footer>
  <strong>Projet TW1 2023 : ma petite compo</strong><br> données issues de <a href="https://www.uefa.com/uefachampionsleague/" target="_blan ">uefa.com</a>
</footer>

赞(0）回复(0）举报 2023-04-08

5gfr0r5j2#

感谢redit上的u/tridd 3r提供的答案。
他的codepen Here
解决方案是添加svg作为footer::before的背景，而不是内容：

footer{
  height:50px;
  margin-top:10px;
  background-color:rgba(120,120,0,0.6);
}
footer::before {
content: "";
background-image:url(https://img.uefa.com/imgml/uefacom/ucl/2021/logos/logo_dark.svg);
background-size:contain;
background-repeat: no-repeat;
float:left;
display:block;
margin: 1px 15px 5px 5px;
height: 45px;
width:45px;
}
body {
  background: black;
}

<footer>
  <strong>Projet TW1 2023 : ma petite compo</strong><br> données issues de <a href="https://www.uefa.com/uefachampionsleague/" target="_blan ">uefa.com</a>
</footer>

赞(0）回复(0）举报 2023-04-08

我来回答

仅使用CSS在页脚左侧添加SVG

2条答案

相关问题

热门标签

最新问答