时间戳

首页 > 解决方案 > 圆圈中的图像不完全可见

css - 圆圈中的图像不完全可见

问题描述

我围绕一个 svg 图标设计了一个 cricle，但该图标在顶部被切断。

.transport-circle {
  border: 3px solid #30574b;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  text-align: center;
  line-height: 150px;
  vertical-align: middle;
  padding: 10px;
  fill: #30574b;
}
<img class="transport-circle style-svg" src="https://wordpress-175698-743047.cloudwaysapps.com/wp-content/uploads/2019/07/train.svg" alt="Train" width="100" height="100" />

知道如何让火车图标完全可见吗？

标签： csssvg

解决方案

将图标视为背景以避免此问题：

.transport-circle {
  border: 3px solid #30574b;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  padding: 10px;
  background-size:cover;
  background-position:center;
  background-origin:content-box;
  background-repeat:no-repeat;
}
<div class="transport-circle style-svg" style="background-image:url(https://wordpress-175698-743047.cloudwaysapps.com/wp-content/uploads/2019/07/train.svg)" alt="Train" ></div>

推荐阅读