问题：

带背景色的文本

陆子航

2023-03-14

我有一个奇怪的问题，老实说，我不知道该怎么做。

我有一个背景图像的盒子。在背景图片上，我有很多带有背景颜色和文字的框。我希望每个框中的文本的颜色是透明的，所以颜色将是文本上面的背景图像的一部分。

这里有一个例子：http://jsfiddle.net/wjdwohdd/5/

它应该是一个图像，而不是绿色背景。

<div class="box">
    <div class="background">
        Example text
    </div>
</div>

.box {
    width:200px;
    height:20px;
    background-color: green;
    padding: 10px;
}

.background {
    color: transparent;
    height: 100%;
    width: auto;
    background-color: red;
    text-align: center;
}

如果我设置颜色:透明，文本的颜色变成红色，我不确定它是否可以作为背景图片。

编辑:我更新了我的jsfiddle。我希望文本的颜色是文本后面的图像的一部分。

共有3个答案

况胡媚

2023-03-14

我不知道是否可以使用CSS。我能想到的唯一解决方案是使用Canvas。但是它太复杂了，而且需要大量的编码。后画布包含您想要显示的图像，而在前画布中，您需要进行背景着色和字母书写。代码如下：

 <body>
      <canvas id="back">
      </canvas>
      <canvas id="front">
      </canvas>
    </body>

#back{
position: fixed;
top: 40px;
left: 40px;
z-index: -1;
}

 #front{
position: fixed;
top: 60px;
left: 60px;
z-index: 99;
}

window.onload = function(){

var h = new Image();

h.src = 'images/color.jpg';

var back = document.getElementById('back');

back.width = h.width;

back.height = h.height;

back.getContext('2d').drawImage(h,0,0,h.width,h.height); 

var front = document.getElementById('front');
var back = document.getElementById('back');

front.width = h.width - 40;

front.height = h.height - 40;

var ctx = front.getContext('2d');

ctx.fillStyle="#ED6";

ctx.fillRect(0,0,h.width - 40,h.height - 40);

ctx.font="150px Verdana";

ctx.fillStyle= 'rgba(0,0,0,1)';

ctx.fillText("HELLO" , h.width/2 - 300 , h.height/2 - 25);

maketransparent(front,back);
};

function maketransparent(front,back){

var backimage = back.getContext('2d').getImageData(0,0,back.width,back.height);

var frontimage = front.getContext('2d').getImageData(0,0,front.width,front.height);

for(var i=0; i<frontimage.data.length; i=i+4){

var line=Math.floor(i/(4*front.width));

line=line+20;

var backi=(line*back.width*4) + 80 + (i%(front.width*4));

if(frontimage.data[i]+frontimage.data[i+1]+frontimage.data[i+2]<50){
frontimage.data[i]=backimage.data[backi];

frontimage.data[i+1]=backimage.data[backi+1];

frontimage.data[i+2]=backimage.data[backi+2];

}

}
 front.getContext('2d').putImageData(frontimage,0,0);

}

岳嘉容

2023-03-14

我建议在父元素中为字体使用颜色，然后在子元素中继承字体颜色，不确定你真正想要什么

.box {
    width:200px;
    height:20px;
    background-color: green;
    padding: 10px;
    color: blue;
}

.background {
    color: inherit;
    height: 100%;
    width: auto;
    background-color: red;
    text-align: center;
}

否则，在子元素中使用带有透明度的rgb颜色作为字体，那么您的背景将是可见的，例如颜色：rgba（0、0、0和0.5）；

能正青

2023-03-14

可以这样做，但需要一个非常新的属性：混合混合模式。

即使它，支持也在增长：它已经在FF中支持了一段时间，并且在最新的Chrome中得到了支持。

要得到它，你需要一个红色背景上的灰色文本，并设置模式为强光

body {
    background-image: url(http://placekitten.com/1200/800);
}
.test {
    font-size: 300px;
    color: #888;
    background-color: red;
    mix-blend-mode: hard-light;
}

<div class="test">TESTING</div>

类似资料：

不带背景色，但不带文字

问题内容：如何在文本保持不透明的同时使跨浏览器（包括Internet Explorer 6）的背景透明？我需要在不使用jQuery等任何库的情况下进行此操作。（但是，如果您知道可以做到这一点的库，那么我很想知道，因此我可以看看他们的代码）。问题答案：使用rgba！除此之外，您还必须声明IE Web浏览器，最好通过条件注释或类似注释进行声明！
SVG中文本的背景色

问题内容：我想像在CSS中一样给SVG的背景上色我只能找到有关的文档，该文档使文本本身着色可能吗问题答案：否，这是不可能的，SVG元素没有表示属性。为了模拟这种效果，您可以使用或类似的东西（过滤器）在text属性后面绘制一个矩形。使用JavaScript，您可以执行以下操作：
背景与背景色：性能

我想知道这一点，经过一点挖掘，找到了这个资源，链接在这个答案中。该资源指出：背景与背景色比较18个色板在页面上呈现100次为小矩形，一次带有背景，一次带有背景颜色。现在，我可以想象要快得多，因为资源也认为：我认为当浏览器看到
CSS颜色与背景颜色与背景？

在超文本标记语言中，我什么时候使用颜色，背景颜色和背景标签有什么区别？有什么区别？
CSS：背景图片上的背景色

问题内容：如果选择了该面板（单击该面板），则该面板的颜色为蓝色。另外，我在该面板上添加了一个小标志（图像），它表示所选面板之前已被选中。因此，如果用户看到例如10个面板，其中有4个带有这个小标记，则他知道自己之前已经单击了这些面板。到目前为止，这项工作还不错。现在的问题是我无法显示小标志并使面板同时变为蓝色。我使用css将面板设置为蓝色，使用设置背景图像。但是背景色似乎在图像上方，因此您看不
11 Markdown 前景色、背景色

1. 前言颜色可以使普通文字表达出更深刻的含义，比如红色用于醒目与警示、绿色用于表达良好与正常等。 Markdown 使普通文本具有格式，但它的原生语法并不支持修改前景色和背景色。为了实现丰富文本颜色的需求，我们需要通过增加 HTML 标签实现此类效果。环境说明：考虑到 Markdown 工具之间的不兼容，有的内容直接从页面复制粘贴到本地不会正常显示，大家学习时自己动手写是肯定没问题的。本节

带背景色的文本

共有3个答案

相关问答

相关文章

相关阅读

相关工具

相关文档