8

我想知道在纯 css 中是否有可能具有模板效果： 具有背景颜色的块，以及显示父块背景的颜色“透明”。

例如，我有一个带有渐变或图案作为背景的父块，我想覆盖一个带有黑色背景的块，文本内容将离开该块，请参阅父块的渐变。

我还没有找到让它工作的方法，但也许有人有想法或提示？

编辑

对不起，我应该不够精确。

这是所需结果的图片： 在此处输入图像描述

4

5 回答 5

4

可能你可以使用 CSS3 background-clip。像这样写：

HTML

<p>T</p>

CSS

p{
    font-size:50px;
    font-family:impact;
    background: url(http://lorempixel.com/output/technics-h-c-1414-1431-2.jpg); 
    -webkit-text-fill-color: transparent;
   -webkit-background-clip: text;
position:relative;    
    width:80px;
    height:80px;
    text-align:center;
    padding-top:10px;
}
p:after{
    content:'';
    position:absolute;
    background:rgba(0,0,0,0.8);
    width:80px;
    height:80px;
    border-radius:100%;
    top:0;
    left:0;
    z-index:-1;
}
body{
    background: url(http://lorempixel.com/output/technics-h-c-1414-1431-2.jpg); 
}

​</p>

检查这个http://jsfiddle.net/rD6wq/6/

于 2012-04-23T16:37:05.097 回答
1 
#element_id {
    opacity:0.4;
    filter:alpha(opacity=40);
}

这将设置 div 的不透明度或您应用它的任何内容的原始不透明度的 40%（通常为 100%，除非您将其应用于已降低不透明度的 .png 或 .gif 图像）

于 2012-04-23T15:58:23.240 回答
1

使用嵌入字体的东西，例如http://www.google.com/webfonts/specimen/Allerta+Stencil可能接近你想要的。通过更改背景和文本颜色，你应该得到你正在寻找的东西

于 2012-04-23T15:08:34.133 回答
1

据我所知，您可以为此使用 SVG，但这并非易事。

this（和this）可能是您需要的最接近的实现。问题是它在每个浏览器中的工作方式都不一样，尽管您可以尝试更深入的研究。

Upd : Lea Verou 在她的文章中提出了一个简单而优雅的解决方案：文本屏蔽——标准方式

于 2012-04-23T16:02:57.137 回答
0

您可以使用 CSS3text-shadow属性。

p{ text-shadow:0px 0px 2px #000 }

在此处查看我的示例。

关于这里的财产的详细信息。

于 2012-04-23T15:34:53.797 回答