Question

我的目标是让背景图像跨越整个屏幕，如下所示：http://playjudgey.com/

我正在尝试将背景图像更改为灰度图像，但每次执行此操作时，都会更改写入图像的所有文本。我假设过滤器适用于我div中的所有内容。我的代码如下：

.hometext {
    width: 600px;
    margin: 0 auto;
    color: red;
    text-align: center;

}

.wrapper {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: url('../img/money.jpg');
    -webkit-filter: grayscale(1);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    overflow: hidden;
}

所以这就是我为CSS做的事情：

Public Shared Function UnProject(ByRef projection As Matrix4, view As Matrix4, viewport As Size, mouse As Vector2) As Vector4
    Dim vec As Vector4

    vec.X = 2.0F * mouse.X / CSng(viewport.Width) - 1
    vec.Y = -(2.0F * mouse.Y / CSng(viewport.Height) - 1)
    vec.Z = 0
    vec.W = 1.0F

    Dim viewInv As Matrix4 = Matrix4.Invert(view)
    Dim projInv As Matrix4 = Matrix4.Invert(projection)

    Vector4.Transform(vec, projInv, vec)
    Vector4.Transform(vec, viewInv, vec)

    If vec.W > Single.Epsilon OrElse vec.W < Single.Epsilon Then
        vec.X /= vec.W
        vec.Y /= vec.W
        vec.Z /= vec.W
    End If

    Return vec
End Function

问题是我写的文字不是红色，而是灰色。有没有办法对此进行不同的编码，以便我的文字显示为彩色？或者我应该通过外部程序转动图像灰度？

Answer 1

您可以使用混合模式获得相同的效果，仅适用于背景，此外，它还有更多支持（FF）

.hometext {
    width: 600px;
    margin: 0 auto;
    color: red;
    text-align: center;
  font-size: 60px;

}

.wrapper {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: url('http://placekitten.com/1000/750');
    background-color: gray;
    background-blend-mode: luminosity;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    overflow: hidden;
}

    <div class="wrapper">
            <div class="hometext">
                You are the best!
            </div>
    </div>

Answer 2

如果您不需要动态更改背景颜色，我只需在基本图像编辑器中将其更改为灰度。我相信CSS filter并不是完全跨浏览器兼容的，所以你会更安全（也更容易）。

但是，如果您要保留现在的状态，则只需更改文本中的filter属性，因为它会从您的父div继承它。

Answer 3

如果你将hometext div放在包装器之外，那么它们都是绝对的：

import multiprocessing as mp  

def compute(test_num):  
    return test_num ** 2

def main():  

    test_num_list = [10, 20, 30, 40, 50, 60, 70, 80]

    pool = mp.Pool(processes=3)  
    results = [pool.apply_async(compute, args=(test_num,)) for test_num in test_num_list]

    output = [r.get() for r in results]  
    print output

<body>
<div class="wrapper"></div>
<div class="hometext">
          You are the best!
</div>

样式和位置需要额外的CSS，但这里有一个小提琴：http://jsfiddle.net/Lepe84tu/

Answer 4

不是将背景图片放在.wrapper上，而是可以将另一个div作为.hometext的兄弟，将图像作为背景 - 这样您就可以设置图像的样式，文本是独立的。

Answer 5

您的<div class="wrapper"> div也会包裹您的hometext div。你应该试试这个：

.hometext {
    width: 600px;
    margin: 0 auto;
    color: red !important;
    text-align: center;

}

灰度背景改变文字颜色？ CSS

5 个答案: