使字体颜色与背景图像相同 [英] Making font color same as that of background image

问题描述

我正在设计一个带有背景图片的网页。中间有一个白色框（使用div），白色框内有一些文字。我想要做的是使文本颜色与正文的背景颜色相同。如果我将文本的颜色属性设置为透明，它会消失，因为有白色的div。我如何做到这一点？

这是JSFiddle的链接： http://jsfiddle.net/FpJpV/

html是

 < DIV> 
< h1>标题< / h1> 
< / div> 
  

该CSS是

  body {
 background-color：red; 
 font-family：sans-serif; 
} 
 
 div {
 width：200px; 
背景颜色：白色; 
 margin：auto; 
 text-align：center; 
填充：1em; 
 
 code 
 
 
注意：在JSFiddle中，为简单起见，我使用了红色背景，但在真正的网页，正文的背景是一张图片。    解决方案

我建议：



尝试使用图片。

作为Photoshop / GIMP将文本从白色图像中剪切出来，以便文本在哪里透明。将它保存为 PNG 并将图片设置为div的背景。

只要确保您移除了白色背景来自div。

示例

a>

像这样： stack.imgur.com/bccU2.pngalt =在这里输入图片描述>

I am designing a webpage with a background-image. There is a white box in the center (using div) and inside the white box is some text. What I want to do is make the text color the same as that of the background of the body. If I set the color attribute of the text to transparent , it disappears since there is a white div. How do I do this?

This is the link to JSFiddle: http://jsfiddle.net/FpJpV/

The html is

<div>
    <h1>Title</h1>
</div>

The CSS is

body {
    background-color: red;
    font-family: sans-serif;
}

div {
    width: 200px;
    background-color: white;
    margin: auto;
    text-align: center;
    padding: 1em;
}

Note: In the JSFiddle, i used a red background for simplicity but in the real webpage, the background of the body is an image.

解决方案

Can't do that with CSS; What I suggest:

Try using an image instead.

Use software such as Photoshop/GIMP to cut the text out from a white image so it's transparent where the text was. Save it as a PNG and set the image as the div's background.

Just make sure you remove the white background from the div as well.

EXAMPLE

Like so:

这篇关于使字体颜色与背景图像相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！