html - 如何使用 CSS 反转背景图像的颜色?
问题描述
我想反转下面给出的背景图像的颜色。
html {
background-image: url('data:image/svg+xml,%3Csvg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z" fill="%239C92AC" fill-opacity="0.4" fill-rule="evenodd"/%3E%3C/svg%3E');
}
解决方案
将着色应用于背景并为 SVG 使用白色。由于您正在处理 html 元素,因此您并不真正需要透明度,因此后面什么都没有。
html {
background: url('data:image/svg+xml,%3Csvg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z" fill="white" fill-rule="evenodd"/%3E%3C/svg%3E'),
rgba(156, 146, 172, 0.4);
}
推荐阅读
- html - 如何创建一个 Web 应用程序,在其中我可以根据下拉选择从工作表中读取文本?
- ruby-on-rails - 所有示例中的 Ruby on Rails 失败/错误
- azure-functions - 使用一组 Azure 函数和单个数据库创建整个后端应用程序有什么缺点?
- azure-storage - 如何为(REST API)天蓝色存储SAS(共享访问签名)构造标头
- python - 加载 keras 模型时产生的警告
- c# - 如何为任何类型的通用类型窗口/页面实现 xaml 页面?
- azure - 更改 Azure ADDS 下仅 Azure AD 云帐户的最小密码长度
- android-databinding - DataBindingUtil.setContentView 偶尔返回 null 的可能原因是什么?
- javascript - 通过 ajax 数据设置的本地存储随机获取未定义
- azure-data-factory-2 - 数据工厂子项修改或创建日期