css 向文本添加伪元素，该元素的作用与背景相同，并与文本一起换行

g52tjvyc 于 2023-05-19 发布在其他

关注(0)|答案(2)|浏览(120)

我有以下标记

<p>Lorem ipsum dolor, sit <mark>adipisicing  adipisicing elit</mark> adipisicing elit. 
Debitis amet quasi deserunt possimus neque laborum, suscipit obcaecati quae pariatur 
quia sit provident, ipsum iusto quos, aliquid ut eveniet beatae ad!</p>

我正在尝试为<mark>标记添加一个“突出显示”样式。
通常我只会使用一个背景色，但在这种情况下，我在CSS变量--site-color: #dc2626中有一个纯色的主题颜色（来自CMS，所以我不能更改它），我不知道如何为css变量添加不透明度。
我的第一个尝试是使mark标签相对，并添加一个绝对的伪元素与坚实的背景和0.1不透明度，这是工作，但只有当mark是在一个单一的行，它不工作时，文本换行（小屏幕或长文本）。
因此，我的问题是如何使这个伪元素以与背景相同的方式起作用，并与文本一起 Package 。

:root {
  --site-color: #c026d3; /* Can't change this */
}

p mark {
    position: relative;
    color: inherit;
    background: inherit;
    padding-left: 1px;
    padding-right: 1px;
}

p mark::before {
    position: absolute;
    content: "";
    display: inline-flex;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--site-color);
    opacity: 0.2;
    border-radius: 2px;
    z-index: -1;
}

<h2>Works when text is short</h2>
<p>Lorem ipsum dolor, sit <mark>adipisicing</mark> adipisicing elit. Debitis amet quasi deserunt possimus neque laborum, suscipit obcaecati quae pariatur quia sit provident, ipsum iusto quos, aliquid ut eveniet beatae ad!</p>

<br />

<h2>Does not work when text is long and start wrapping</h2>
<p>Lorem ipsum dolor, sit <mark>adipisicing elit. Debitis amet quasi deserunt possimus neque laborum, suscipit obcaecati quae pariatur quia sit provident, ipsum iusto quos, aliquid ut eveniet beatae ad! adipisicing elit. Debitis amet quasi deserunt possimus neque laborum, suscipit obcaecati quae pariatur quia sit provident, ipsum iusto quos, aliquid ut eveniet beatae ad!</mark> adipisicing elit. Debitis amet quasi deserunt possimus neque laborum, suscipit obcaecati quae pariatur quia sit provident, ipsum iusto quos, aliquid ut eveniet beatae ad!</p>

css

来源：https://stackoverflow.com/questions/76280003/add-pseudo-element-to-text-that-acts-the-same-way-as-a-background-and-wraps-with

2条答案

按热度按时间

inn6fuwd1#

使用新的color-mix()添加不透明度。你想要的东西不能用伪元素来完成：

:root {
  --site-color: #c026d3; /* Can't change this */
}

p mark {
  position: relative;
  color: inherit;
  background: inherit;
  padding-left: 1px;
  padding-right: 1px;
  /* adjust the percentage to control the opacity */
  background: color-mix(in srgb, var(--site-color), #0000 20%)
}

<h2>Works when text is short</h2>
<p>Lorem ipsum dolor, sit <mark>adipisicing</mark> adipisicing elit. Debitis amet quasi deserunt possimus neque laborum, suscipit obcaecati quae pariatur quia sit provident, ipsum iusto quos, aliquid ut eveniet beatae ad!</p>

<br />

<h2>Does not work when text is long and start wrapping</h2>
<p>Lorem ipsum dolor, sit <mark>adipisicing elit. Debitis amet quasi deserunt possimus neque laborum, suscipit obcaecati quae pariatur quia sit provident, ipsum iusto quos, aliquid ut eveniet beatae ad! adipisicing elit. Debitis amet quasi deserunt possimus neque laborum, suscipit obcaecati quae pariatur quia sit provident, ipsum iusto quos, aliquid ut eveniet beatae ad!</mark>  adipisicing elit. Debitis amet quasi deserunt possimus neque laborum, suscipit obcaecati quae pariatur quia sit provident, ipsum iusto quos, aliquid ut eveniet beatae ad!</p>

在更好的浏览器支持之前，您可以考虑覆盖：

:root {
  --site-color: #c026d3; /* Can't change this */
}

p mark {
  position: relative;
  color: inherit;
  background: inherit;
  padding-left: 1px;
  padding-right: 1px;
  background: 
   /* use the same color as the main background with some opacity */
   linear-gradient(#fff5 0 0),
   var(--site-color)
}

<h2>Works when text is short</h2>
<p>Lorem ipsum dolor, sit <mark>adipisicing</mark> adipisicing elit. Debitis amet quasi deserunt possimus neque laborum, suscipit obcaecati quae pariatur quia sit provident, ipsum iusto quos, aliquid ut eveniet beatae ad!</p>

<br />

<h2>Does not work when text is long and start wrapping</h2>
<p>Lorem ipsum dolor, sit <mark>adipisicing elit. Debitis amet quasi deserunt possimus neque laborum, suscipit obcaecati quae pariatur quia sit provident, ipsum iusto quos, aliquid ut eveniet beatae ad! adipisicing elit. Debitis amet quasi deserunt possimus neque laborum, suscipit obcaecati quae pariatur quia sit provident, ipsum iusto quos, aliquid ut eveniet beatae ad!</mark>  adipisicing elit. Debitis amet quasi deserunt possimus neque laborum, suscipit obcaecati quae pariatur quia sit provident, ipsum iusto quos, aliquid ut eveniet beatae ad!</p>

赞(0）回复(0）举报 2023-05-19

l7mqbcuq2#

这并不适用于所有浏览器，您需要检查哪些浏览器。参考：https://www.w3.org/TR/css-color-5/
大大简化了，你可能需要调整颜色。在这里，我用你的网站颜色和白色#ffffff作为混合。

:root {
  --site-color: #c026d3;
  /* Can't change this */
}

p mark {
  background-color: color-mix(in srgb, #ffffff, var(--site-color));
}

<h2>Works when text is short</h2>
<p>Lorem ipsum dolor, sit <mark>adipisicing</mark> adipisicing elit. Debitis amet quasi deserunt possimus neque laborum, suscipit obcaecati quae pariatur quia sit provident, ipsum iusto quos, aliquid ut eveniet beatae ad!</p>

<br />

<h2>Does not work when text is long and start wrapping</h2>
<p>Lorem ipsum dolor, sit <mark>adipisicing elit. Debitis amet quasi deserunt possimus neque laborum, suscipit obcaecati quae pariatur quia sit provident, ipsum iusto quos, aliquid ut eveniet beatae ad! adipisicing elit. Debitis amet quasi deserunt possimus neque laborum, suscipit obcaecati quae pariatur quia sit provident, ipsum iusto quos, aliquid ut eveniet beatae ad!</mark>  adipisicing elit. Debitis amet quasi deserunt possimus neque laborum, suscipit obcaecati quae pariatur quia sit provident, ipsum iusto quos, aliquid ut eveniet beatae ad!</p>

赞(0）回复(0）举报 2023-05-19

我来回答

css 向文本添加伪元素，该元素的作用与背景相同，并与文本一起换行

2条答案

相关问题

热门标签

最新问答