如何在样式表中的 URL 中换行

2023-11-23

我有一个包含很长行(数据网址)的样式表。 无论如何,我可以将这些行分成更小的行吗?

长线示例:

background-image: url(data: image/png;base64, really long string);

您可以通过将 URI 用引号引起来并附加一个\到 URI 中要换行的每一行的末尾,后跟一个换行符。解析器将处理URI 中的字符串就像\并且紧随其后的换行符不存在。

当使用非 Base64 编码数据 URI 的 URI 执行此操作时,您需要确保字符串内没有缩进,否则链接将不起作用。这是因为空格在 URI 中很重要。空格在 Base64 字符串中并不重要,因此在 Base64 编码的数据 URI 中保留缩进是可以的,但这是 Base64 字符串的属性,而不是 URI。如果这让您感到困惑,为了简单起见,不要缩进。

这是一个例子:

#circle {
  width: 16px;
  height: 16px;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQ\
CAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxIAAAsSAdLdfvw\
AAAB6SURBVDhP3ZPLEcAgCERpwSYpLi3YgrWkBbLAIYHJZEi45fBUPq4jColIhIjBBmAF1Mc5/zSIBl\
jmekZzRhTwzbuZNTTXRGCZQOXkzHIBv3MOVmEVmMn5hqkCd4EyPxFoF7H5jJiwaHwkDJiaX1lxkY/Nd\
MVrUmxnoQPGWQ2Hnu//1wAAAABJRU5ErkJggg==');
}
<div id=circle></div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在样式表中的 URL 中换行 的相关文章

  • 如何使用div绘制曲线?

    我需要使用 CSS 绘制两条曲线 我尝试过组装一些divs 使用CSSborder radius绘制弧形面板 但结果很糟糕 还有更好的算术吗 正如我之前在评论中提到的 请不要使用CSS用于实现复杂的曲线和形状 虽然仍然可以使用 CSS 来实
  • CSS 变换源不能与 translate() 一起使用

    我想将 div 从中心点移开 但似乎translate 不关心变换原点是什么 并使用元素的左上角来移动它 这是一个测试来证实这一点 div class items div class item 1 style width 100px hei
  • 使用 PHP 将 class="active" 添加到活动页面

    动态标头 CSS 类更改为活动使用 PHP 目录 我想要的班级 li 在活动目录下更改标签 现在 每个指南都向我展示了当您的页面等于它时如何执行此操作 但我想更改 这 li li 取决于我所在的目录 例如 如果说我在 http exampl
  • 如何实现右边缘倾斜的 div? [复制]

    这个问题在这里已经有答案了 我几天来一直在寻找使 div 的右边缘倾斜 45 度的代码 这是我特别想要得到的图像示例 似乎有很多 倾斜边缘 div 的示例 但我找不到任何具有特定右侧倾斜的示例 我花了很多时间试图改变其他人的代码 但结果却一
  • Firefox 忽略背景大小的 css

    尝试使用背景大小 CSS 规则缩小图像 但 Firefox 3 5 似乎会忽略该规则 CSS privatejoker background aqua url styles images home privatejoker png no r
  • 跨浏览器:禁用输入字段的不同行为(文本可以/不能复制)

    我有一个被禁用的输入 html 字段 在某些浏览器 Chrome Edge Internet Explorer 和 Opera 中可以选择并复制文本 但至少在 Firefox 中这是不可能的 您可以通过在不同浏览器中执行以下代码来测试
  • 由于 MIME 类型不受支持,拒绝应用样式

    我不断收到一条错误消息 指出 MIME 类型 text html 不可执行或不是受支持的样式表 MIME 类型 并且启用了严格的 MIME 检查 我的链接代码是
  • 两个 Div 之间的固定宽度间隙

    有谁知道如何修复两个 div 之间的间隙 我有一个主要内容 Div 里面有两个带有图片的 Div 视图的宽度为 768 像素 当我开始拉伸视图时 两张图片开始相互远离 但理想情况下 主要内容 Div 应该在周围有空白的情况下拉伸 并且图片之
  • 通过 JavaScript 检测浏览器换行

    我需要 javascript 来检测每个浏览器包装的文本行并将其包装到 span class line 我读过一些关于测量每个单词的 y 轴的文章 但还没有看到可靠的解决方案 这是我到目前为止所拥有的 看到它Jsfiddle http js
  • html 和 body 元素的高度

    我一直在互联网上查找 min height 和 height 属性如何在 body 和 html 元素上工作 我在很多地方都看到过下面的代码 html height 100 body min height 100 上面的内容可以与其他一些
  • CSS 的波浪形状

    我正在尝试使用 CSS 重新创建此图像 我不需要重复它 这就是我开始的 但它只有一条直线 wave position absolute height 70px width 600px background e0efe3 div div 我认
  • 我可以在 CSS 类名中使用驼峰命名法吗

    我想命名一个 CSS 类并调用它imgSuper 我可以在 CSS 类中使用驼峰命名法吗 从技术上讲是可以的 但这是有风险的 因为虽然 CSS 语法大多不区分大小写 但在某些浏览器中 在某些条件下 类名被视为区分大小写 因为规范没有指定浏览
  • 从数据 URI 解码 QR 码

    我尝试从数据 uri 中解码二维码 var dataUri data image gif base64 R0lGODdh9gD2AIAAAAAAAP ywAAAAA9gD2AAAC decodeQrCode dataUri cb 我已经尝试
  • 使用 JavaScript 使链接保持活动状态并在单击时显示悬停效果

    I am struggling to make this work I d like to make it where if O F is clicked the hover state stays active if another li
  • 如何更改bootstrap中form-control弹出窗口中必填字段的默认消息?

  • 如何在使用页面锚点导航时设置“激活”类以在 Angular 2 中引导导航栏?

    我正在使用 Angular 2 和 Bootstrap 4 创建一个单页网站 我创建了一个始终位于页面顶部的导航栏组件 并且我正在使用页面锚点导航 id 请注意 我还没有创建路由模块 到目前为止还没有必要这样做 导航栏代码如下
  • 现在 CSS3 供应商前缀有多必要? [复制]

    这个问题在这里已经有答案了 我只是想知道现在在 CSS 中指定 webkit moz ms 或 o 等供应商前缀在多大程度上仍然有必要 如果我理解正确的话 opera 切换到了 webkit 所以会删除 o 对吗 IE 在 IE10 中不再
  • 如何阻止破折号自行包裹?

    我有一个标题 标题最后一个单词的末尾是一个破折号 单词和破折号之间没有空格 当浏览器窗口变小时 破折号会中断并换成新行 在自己的行上有一个破折号是不好的排版 如何停止破折号之前的换行 以便最后一个单词运行到新行 这是代码 h1 XYZ co
  • 如何仅在最后一个
  • 处给出透明六边形角度?
  • 我必须制作这样的菜单 替代文本 http shup com Shup 330421 1104422739 My Desktop png http shup com Shup 330421 1104422739 My Desktop png
  • 为什么元素上的负底部边距会降低该元素父元素的高度?

    这可能是由于边距折叠造成的 我知道边距折叠 至少知道它如何影响相邻元素 但我不明白当涉及负边距时它如何在嵌套元素上工作 例如 在此标记和随附的 CSS 中 Markup div class parent div class child Ch

随机推荐

  • 在运行时从不同的文件加载 Properties.Settings

    有没有办法从默认文件以外的其他文件加载设置App config运行时文件 我想在加载默认配置文件后执行此操作 我用Settings SettingsVisual Studio 中的 GUI 来创建我的App config为我归档 配置文件最
  • 带边框/轮廓的六边形形状

    我知道可以使用以下代码创建六边形形状 hex before content width 0 height 0 border bottom 30px solid 6C6 border left 52px solid transparent b
  • 在同一个 apache 服务器上运行 django 和 Flask

    我正在尝试在同一个 apache 服务器上运行 django 和 Flask WSGISocketPrefix var www wsgi
  • 字符串变量可以设置多少个字符?

    我有一个字符串类型的变量 例如string test 我可以设置多少个字符进行测试 谢谢 所有引用类型 如字符串 实例的最大大小是有限的 由 CLR 改为 2GB 由于 NET 中的一个字符占用 2 个字节 这意味着一个字符串最多可以容纳大
  • StreamProvider 不更新状态

    我正在尝试使用StreamProvider from this很棒的包 但我一直在努力让特定的流正常工作 我创建一个StreamController我用它来添加数据Stream通过其Sink 所有这一切似乎都运作良好 但是当使用这个Stre
  • 允许 PHP 会话延续到子域

    我对所有用户数据以及当用户访问其个人资料时使用 PHP 会话 不是 cookie 除了会话 id cookie user mydomain example他们会立即 注销 直到删除子域 有没有办法接受来自所有域的会话 只要它 mydomai
  • Internet Explorer 中的 标记

    既没有标签也不text decoration blink Internet Explorer 支持 css 中的样式 有什么技术可以在 IE 中制作闪烁文本吗 如果可能的话 避免眨眼 这会惹恼别人 但你可以用 JS jQuery 来做到这一
  • ASP.NET Identity 2 支持匿名用户吗?

    我想允许匿名 尚未注册和注册的用户在我的网站上发帖 Posts table Id int Subject nvarchar Body nvarchar UserId uniqueidentifier 该项目使用最新的 MS 技术 ASP N
  • 将 GVim 配色方案更改为类似于命令行 Vim

    是否可以使 GVim 的配色方案与命令行版本 Vim 中的配色方案完全匹配 与白色背景的 GVim 相比 我更喜欢 Vim 的颜色 但我仍然想使用 GVim 因为 Shift 键在命令行版本上映射得不太好 是的 可以使 gvim 与终端 V
  • 感人片段

    任何人都可以建议我为此的算法 您将获得 x 轴上 N 个线段的起点和终点 这些片段中有多少可以被恰好两条垂直于它们的线接触到 即使是在它们的边缘 输入示例 3 5 2 3 1 3 1 5 3 4 4 5 5 1 2 1 3 2 3 1 4
  • 我可以指定 WPF DataGrid 中哪些列是可编辑的吗?

    我有一个带有自动生成列的 WPF 4 0 DataGrid 我只想允许用户编辑第一列 有一个简单的方法可以做到这一点吗 我试图添加 DataGridCell 样式并根据 ColumnName 第一列始终具有相同的名称 或 ColumnInd
  • 强制 IE7 进入标准渲染模式(不是怪癖)

    由于 IE7 在怪异模式下渲染 我在 IE7 中遇到显示问题 我通过显示 document compatMode 并返回 BackCompat 而不是 CSS1Compat 来确认这一点 使用 IE8 并恢复到 IE7 是可行的 因为这样可
  • 如何在 Springfox 中更改 Swagger UI index.html 徽标和标题内容?

    我正在记录使用 Spring Boot 2 4 3 创建的 APIspringfox swagger3 0 0 所以我现在有以下页面 我的客户想要将 Swagger UI 徽标更改为他们自己的 我做不到 我搜索并找到了一些解决方案 但它不起
  • 仅当应用程序未运行时显示推送通知 android

    在我的应用程序中 我集成了推送通知GCM 每当通知出现时它就工作正常 但即使用户位于应用程序内部 也会出现推送通知 我希望仅当用户位于应用程序外部时才显示通知 这是我的推送通知代码 Gcm广播接收器 public class GcmBroa
  • 初学者选择 DirectX 9 还是 DirectX 10?

    我想做一些项目 让我的简历对游戏公司更有吸引力 所以我要开始买书了 但我不知道应该从阅读 DirectX 9 或 10 api 书籍开始 DirectX10 很棒 但业界似乎正在 缓慢向 10 迈进 那么我应该使用 9 还是使用 10 我建
  • 为应用程序选择多个 Internet 连接之一

    我有一台具有几种不同互联网连接的计算机 LAN WLAN WiFi 或 3G 所有这些都是活动的 机器可以使用其中任何一个 现在我想告诉我的应用程序使用可用的连接之一 例如 我想告诉我的应用程序仅使用 WiFi 而其他软件可能使用其他功能
  • Android - 自定义语音操作的意图

    当我使用谷歌语音搜索时 我可以说 发送文本 谷歌将启动我的短信程序 我可以说 听 谷歌将启动我的默认音乐应用程序 我的应用程序是否可以注册它自己的 特殊短语 例如 MyApp DoSomething 然后让 Google 启动 MyApp
  • 更优雅的多行 JavaScript 字符串方法

    我知道如何在不使用 的情况下打印大字符串的唯一方法是使用 反斜杠 丑陋的 div div 有没有办法在 longString 不受污染的情况下做到这一点 php 有 foo 长多行字符串
  • Android Actionbar 设置选项卡宽度

    目前我正忙于为我的公司开发 WHMCS 应用程序 作为导航 我想使用操作栏中的选项卡功能 但是 如何编辑选项卡的宽度 我需要在一个屏幕上同时显示 5 个内容 而无需滚动 我已经尝试过一些这样的样式
  • 如何在样式表中的 URL 中换行

    我有一个包含很长行 数据网址 的样式表 无论如何 我可以将这些行分成更小的行吗 长线示例 background image url data image png base64 really long string 您可以通过将 URI 用引