html - 水平居中base64背景图像不起作用
问题描述
我试图将 base64 背景图像居中在一个水平矩形 div 内,但它不起作用。
我知道这应该很简单,我在这里研究了许多几乎相似的问题,但没有任何技巧奏效。图像没有水平居中,我不知道为什么。事实上,除非我明确使用像素,否则背景位置似乎没有任何效果。
你可以在这个操场上看到它: https ://codesandbox.io/s/solitary-worker-vvrx4?file=/index.html
.container {
background: red;
width: 100px;
height: 16px;
background-image:url("data:image/svg+xml;base64,...");
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
}
<div class="container"></div>
有人可以帮忙吗?谢谢你。
解决方案
看起来问题出在您的 SVG 上。对其进行了更改并生成了一个可以正常工作的新base64。不过,我不太确定为什么会解决这个问题。
我做了什么:
- 改为
transform="rotate(90 8 8)"
_transform="rotate(90)"
- 添加了特定的宽度和高度属性
width="160"
height="160"
结果如下
.icon {
background: red;
width: 100px;
height: 16px;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
}
.icon--broken {
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIxLjAuMiwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNiAxNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTYgMTY7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA4IDgpIiBmaWxsPSIjMzM5OWZmIj4KPGc+Cgk8Y2lyY2xlIGN4PSI3LjgiIGN5PSIxMy45IiByPSIxLjciLz4KCTxwYXRoIGQ9Ik03LjgsMTEuOGMxLjIsMCwyLjEsMC45LDIuMSwyLjFDOS45LDE1LjEsOSwxNiw3LjgsMTZzLTIuMS0wLjktMi4xLTIuMUM1LjcsMTIuNyw2LjcsMTEuOCw3LjgsMTEuOHoiLz4KPC9nPgo8Zz4KCTxjaXJjbGUgY3g9IjcuOCIgY3k9IjcuOSIgcj0iMS43Ii8+Cgk8cGF0aCBkPSJNNy44LDUuOGMxLjIsMCwyLjEsMC45LDIuMSwyLjFDOS45LDkuMSw5LDEwLDcuOCwxMFM1LjcsOS4xLDUuNyw3LjlDNS43LDYuOCw2LjcsNS44LDcuOCw1Ljh6Ii8+CjwvZz4KPGc+Cgk8Y2lyY2xlIGN4PSI3LjgiIGN5PSIyLjEiIHI9IjEuNyIvPgoJPHBhdGggZD0iTTcuOCwwQzksMCw5LjksMC45LDkuOSwyLjFjMCwxLjItMC45LDIuMS0yLjEsMi4xUzUuNywzLjMsNS43LDIuMUM1LjcsMC45LDYuNywwLDcuOCwweiIvPgo8L2c+Cjwvc3ZnPgo=");
}
.icon--fixed {
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIxLjAuMiwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE2IDE2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgdHJhbnNmb3JtPSJyb3RhdGUoOTApIiBmaWxsPSIjMzM5OWZmIiB3aWR0aD0iMTYwIiBoZWlnaHQ9IjE2MCI+CjxnPgoJPGNpcmNsZSBjeD0iNy44IiBjeT0iMTMuOSIgcj0iMS43Ii8+Cgk8cGF0aCBkPSJNNy44LDExLjhjMS4yLDAsMi4xLDAuOSwyLjEsMi4xQzkuOSwxNS4xLDksMTYsNy44LDE2cy0yLjEtMC45LTIuMS0yLjFDNS43LDEyLjcsNi43LDExLjgsNy44LDExLjh6Ii8+CjwvZz4KPGc+Cgk8Y2lyY2xlIGN4PSI3LjgiIGN5PSI3LjkiIHI9IjEuNyIvPgoJPHBhdGggZD0iTTcuOCw1LjhjMS4yLDAsMi4xLDAuOSwyLjEsMi4xQzkuOSw5LjEsOSwxMCw3LjgsMTBTNS43LDkuMSw1LjcsNy45QzUuNyw2LjgsNi43LDUuOCw3LjgsNS44eiIvPgo8L2c+CjxnPgoJPGNpcmNsZSBjeD0iNy44IiBjeT0iMi4xIiByPSIxLjciLz4KCTxwYXRoIGQ9Ik03LjgsMEM5LDAsOS45LDAuOSw5LjksMi4xYzAsMS4yLTAuOSwyLjEtMi4xLDIuMVM1LjcsMy4zLDUuNywyLjFDNS43LDAuOSw2LjcsMCw3LjgsMHoiLz4KPC9nPgo8L3N2Zz4K");
}
<div class="icon icon--broken"></div>
<div class="icon icon--fixed"></div>
推荐阅读
- java - 为用户显示更好的错误消息
- python - 如何使用 Python 在静默模式下打印 pdf 文件且无需安装其他应用程序
- ruby-on-rails - 在 postgresql rails 中输入长度大于 255
- performance - Modelica中非线性求解器的仿真速度
- pandas - Pandas .agg() 删除列(lambda 函数)
- c++ - c ++ .exe和.dll在.exe中使用相同的全局变量?
- ios - 使用原始类型 CGRect 创建枚举
- django - 如何在其 docker 容器中执行 psql 交互?
- java - 添加@SpringBootTest注解后无法加载ApplicationContext
- android - 从 url 下载 PDF 文件并存储在内部存储中,然后尝试从任何 PDF 阅读器打开它,它的显示文件格式在颤振中不受支持