CSS，HTML叠加背景透明度

Striped background example

我会尽力给予最好的说明了这个问题：

在图像你会看到一个标题（例如h2）。你可以在背景上看到它的条纹（身体背景）。我想要实现的是让这个标题具有灰色条纹的背景（在图像上用蓝色边框标记），但是文本的位置不是我想要的背景，而是背景（标记为在红色边框）。

我只对这种解决方案是：

<h1><span>Our Solutions</span></h1>

h1 
{ 
    background: url(stripes.png); 
} 
h1 span 
{ 
    background: url(body-stripes.png) 
}

但与条纹从与那些从体标题匹配的问题。

有什么办法解决这个问题吗？

来源

2012-11-08 kroma

向我们展示您的代码kroma .......与演示 –

您需要找到一个固定的已知点，您可以将它们同时固定。也许将两个背景定位在页面的右边缘，然后将它们从该位置平铺。 – trapper

@krona现在用于这个我的东西你想要这个http://tinkerbin.com/DsbMShGb –

相反，我会在H1周围包装一个包装，但匹配条纹的关键是使用背景定位。

<div id='bar'><h1>Our Solutions</h1></div>

#bar 
{ 
    width:100%; 
    background: url(stripes.png); 
} 
h1{ 
    display: inline-block; 
    width:50px; 
    height:18px; 
    overflow: hidden; 
    background-attachment: fixed; 
    background: url(body-stripes.png); 
    background-position: -4px 0px; 
}

然后改变 “-4px” 1个像素在时间直到条纹匹配。在这个例子中，“-4px”将背景图像向左移动4个像素。

来源

2012-11-08 09:46:36 Hobbleknee

你看到问题在这里，如果你做屏幕截图和缩放，你会看到条纹不匹配...问题是标题将始终在不同的地方，其中很多在页面上，也有一些在1/3列右上浮动等等...即时通讯 – kroma

我不知道如果我明白。该网页是否在某处在线，以便我们可以看到它？ – Hobbleknee

p.s.只有通过指定背景位置才能使条纹匹配。您必须将“-4px”调整为正确的像素数量，直到它排成一行。 – Hobbleknee

CSS，HTML叠加背景透明度

回答

相关问题