html - CSS - 在没有子元素的情况下更改类文本的 css 背景

Question

我正在开发一个基于定期更新的 wordpress 主题的元素，因此我无法更改 HTML(无论如何都不会造成维护困难)。我添加了一个样式表，允许我更改网站的外观，我所要做的就是在每次更新时添加一个“include”。

我有一个可用性日历，显示如下:

如您所见，“31”几乎看不见。

html 输出:

<td class="calendar-end" data-curent-date="1564531200">
31
</td>

我想编辑文本的 css 以添加反向渐变(红色部分为白色，白色部分为灰色)，以便文本可以正确阅读。在下面查看我的 CSS

background: linear-gradient(135deg,  #ffffff 0%,#ffffff 48%,#4d5567 48%,#4d5567 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

这给出了以下结果(当通过 chrome 检查器向元素添加 <p> 标签并为其提供 css 规则时)

我的问题是，我不知道如何为文本创建规则，因为它不是子元素。

通常我会用 <p> 吞没 31标签，以便我可以为 .calendar-end p 创建规则但由于 HTML 限制，这是不可能的......

有没有一种我不知道的方法可以通过特定的 css 规则影响 td 内的文本？ 如果我尝试将我的代码应用于 .calendar-end class 它会导致与背景渐变的冲突，我最终得到完全不可见的文本(与背景相同的渐变)

我不确定我的要求是否可行，但 css 不是我的强项，我希望这里有人比我更了解这个主题 :D

感谢大家的帮助!

Answer 1

使用 chrome，你可以考虑像下面这样的多个背景(不适用于 firefox，raised a bug)

.calendar-end {
  color: transparent;
  background: 
    linear-gradient(135deg, #ffffff 48%, #4d5567 48%),
    linear-gradient(135deg, red 48%, #fff 48%);
  -webkit-background-clip: 
    text,
    padding-box;
  background-clip: 
    text,
    padding-box;
  width:100px;
  height:100px;
  font-size:100px;
}

<div class="calendar-end" data-curent-date="1564531200">
  31
</div>

对于其他浏览器，考虑一个伪元素。只需确保不向主元素指定任何 z-index 以将伪元素放在后面(相关:Why can't an element with a z-index value cover its child?)

.calendar-end {
  background: 
    linear-gradient(135deg, #ffffff 48%, #4d5567 48%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  width:100px;
  height:100px;
  font-size:100px;
  position:relative;
  
}
.calendar-end:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background: linear-gradient(135deg, red 48%, #fff 48%);
}

<div class="calendar-end" data-curent-date="1564531200">
  31
</div>

如果文本和背景的渐变相同，您可以优化如下代码:

.calendar-end {
  background-image: 
    linear-gradient(135deg, #ffffff 49%, #4d5567 50%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  width:100px;
  height:100px;
  font-size:100px;
  position:relative;
  
}
.calendar-end:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-image: inherit;
  transform:rotate(180deg);
}

<div class="calendar-end" data-curent-date="1564531200">
  31
</div>