草庐IT

html - 如何通过隐藏边框使文本透明?

我制作了一个内容与边框重叠的英雄部分。这是它的样子:我想删除那个灰色区域以使其透明并使背景可见。但是正如您所看到的,它在边框中重叠。所以我不想看到边界被划线。内容和图像是动态的,因此宽度可能会发生变化。现场演示:OnCodepenHTMLWemakeyourwebsitebeautiyul&usable—Citation,ABCIncCSS@importurl(https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900);body{background:url('https://source.unsplash

html - 如何通过隐藏边框使文本透明?

我制作了一个内容与边框重叠的英雄部分。这是它的样子:我想删除那个灰色区域以使其透明并使背景可见。但是正如您所看到的,它在边框中重叠。所以我不想看到边界被划线。内容和图像是动态的,因此宽度可能会发生变化。现场演示:OnCodepenHTMLWemakeyourwebsitebeautiyul&usable—Citation,ABCIncCSS@importurl(https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900);body{background:url('https://source.unsplash

html - 如何让 Google Font API 中的连字显示在 Google Chrome 中?

我正在使用GoogleFontAPI显示我的网站标志。(参见stolencamerafinder.com的顶部)在Chrome中,字母“f”和“i”分开出现,但在FireFox中,它们是一个很好的连接ligature如何强制Chrome使用连字?如果我在html中使用连字ascii字符(fi),那么它不会使用字体,它会回退到arial,但字体(OFLSortsMillGoudyTT)必须支持该连字,因为firefox会显示它。更新:我最终放弃了Google字体API,转而使用普通的@font-face。无论如何,在fontsquirrel.com上有更多选择。

html - 如何让 Google Font API 中的连字显示在 Google Chrome 中?

我正在使用GoogleFontAPI显示我的网站标志。(参见stolencamerafinder.com的顶部)在Chrome中,字母“f”和“i”分开出现,但在FireFox中,它们是一个很好的连接ligature如何强制Chrome使用连字?如果我在html中使用连字ascii字符(fi),那么它不会使用字体,它会回退到arial,但字体(OFLSortsMillGoudyTT)必须支持该连字,因为firefox会显示它。更新:我最终放弃了Google字体API,转而使用普通的@font-face。无论如何,在fontsquirrel.com上有更多选择。

html - 关于继承的 CSS 性能

我知道ID规则比类规则快,类规则比标签规则快,标签规则比通用规则快,如MDN所述.我的问题与继承方面的CSS性能有关。例如,以下哪个更有效?body{font-family:Helvetica,Arial,sans-serif;font-size:16px;}h1{font-family:Georgia,serif;font-size:36px;font-weight:700;}或h1{font-family:Georgia,serif;font-size:36px;font-weight:700;}.article-text{font-family:Helvetica,Arial,s

html - 关于继承的 CSS 性能

我知道ID规则比类规则快,类规则比标签规则快,标签规则比通用规则快,如MDN所述.我的问题与继承方面的CSS性能有关。例如,以下哪个更有效?body{font-family:Helvetica,Arial,sans-serif;font-size:16px;}h1{font-family:Georgia,serif;font-size:36px;font-weight:700;}或h1{font-family:Georgia,serif;font-size:36px;font-weight:700;}.article-text{font-family:Helvetica,Arial,s

html - 如果你将 CSS font-size 应用于 body 元素,你如何处理嵌套标签和继承?

我正在重新设计一个包含大量旧内容的网站。主要的设计更改是使站点具有flex以填充各种屏幕尺寸。我使用body元素中的字体大小作为执行此操作的机制,并将所有测量值设置为ems。这按预期工作,但当我找到一个也指定了字体大小的嵌套元素时,我遇到了麻烦。在下面的示例中,我展示了如何在p标记内插入一个span标记,该标记具有分配给它的字体大小的类会导致字体大小被继承并基本上应用两次。我知道这是它的工作原理,但我该如何处理呢?我经常遇到这种情况,包括链接、列表和粗体文本样式。body设置为1em的原因是我可以检测屏幕分辨率并更改font-size的值以使整个设计按比例缩小或增大。所有设计元素都已从

html - 如果你将 CSS font-size 应用于 body 元素,你如何处理嵌套标签和继承?

我正在重新设计一个包含大量旧内容的网站。主要的设计更改是使站点具有flex以填充各种屏幕尺寸。我使用body元素中的字体大小作为执行此操作的机制,并将所有测量值设置为ems。这按预期工作,但当我找到一个也指定了字体大小的嵌套元素时,我遇到了麻烦。在下面的示例中,我展示了如何在p标记内插入一个span标记,该标记具有分配给它的字体大小的类会导致字体大小被继承并基本上应用两次。我知道这是它的工作原理,但我该如何处理呢?我经常遇到这种情况,包括链接、列表和粗体文本样式。body设置为1em的原因是我可以检测屏幕分辨率并更改font-size的值以使整个设计按比例缩小或增大。所有设计元素都已从

html - Font Awesome 图标对齐

我尝试将三个fa图标排成一行,使它们具有相同的高度。问题是即使我手动设置它们的大小(通过font-size属性)它们看起来也不对齐(虽然我需要它们在11px左右)。很长一段时间以来,我也一直在尝试改变他们的立场。结果是什么:.trash{position:relative;font-size:11px;}.upload{position:relative;font-size:11px;}.download{position:relative;top:1px;font-size:11px;}显然,它们没有对齐。有没有可能让他们更“均匀”?我知道已经有人问过类似的问题,但它们并没有真正帮助

html - Font Awesome 图标对齐

我尝试将三个fa图标排成一行,使它们具有相同的高度。问题是即使我手动设置它们的大小(通过font-size属性)它们看起来也不对齐(虽然我需要它们在11px左右)。很长一段时间以来,我也一直在尝试改变他们的立场。结果是什么:.trash{position:relative;font-size:11px;}.upload{position:relative;font-size:11px;}.download{position:relative;top:1px;font-size:11px;}显然,它们没有对齐。有没有可能让他们更“均匀”?我知道已经有人问过类似的问题,但它们并没有真正帮助