我正在寻找一种纯粹的CSS方法,用于在一个框(div,p等)中创建透明文本,其中框中填充了文本周围的颜色,但不是文本本身(它是透明的la rgba / hsla) .

想象一下div的样式,其中的文本颜色是rgba .2 alpha lvl,背景颜色是实心的,其中背景纯色在文本中看不到.当然,使用多个堆叠的div /块的解决方案将是非常可接受的,但是应该允许悬停状态,因此可以打开/关闭该效果.在使用它时,可以将这个div应用于图像顶部或另一个可以通过字母看到的div.

所以！ CSS / html的工作原理是文本总是应用在背景之上(原因称为背景),因此,在文本颜色上使用透明颜色除了显示背景的颜色之外什么都不做.我尝试创建一个带有大框阴影的背景,以便查看它是否以不同的方式计算,并且它不是(并且不能想到另一种方法).

而不是用我有限的CSS知识喋喋不休,我认为你明白了,所以尽我所能！我希望这至少可以在Chrome和Firefox中使用.

Stacked Overflow不允许我在没有附带代码的情况下放置一个jsfiddle,我不想在这里放置无意义的代码只是为了链接到“起点”代码.
相反,这是一个解释明显想法的图像：

Demo Fiddle

您只能在CSS中完成此操作,但支持有限.

您可以将-webkit-background-clip属性和-webkit-text-fill-color设置为透明.

但这仅适用于webkit浏览器.

例如.：

div {
   color: white;  /* Fallback */
   background: url(yourimage.png) no-repeat;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

见here for more on background-clip

The background-clip CSS property specifies whether an element’s
background,either the color or image,extends underneath its border.

If there is no background image,this property has only visual effect
when the border has transparent regions (because of border-style) or
partially opaque regions; otherwise the border covers up the
difference.

或者 – 您可以使用SVG,per this question

.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

登录后复制

<p><p></p>这里文字图片都没透明度了 
<p>图片</p> 
</p>

登录后复制

body { 
background-image: url(./105247.png); 
background-repeat: repeat; 
} 
.p2{ width:100px; height:100px; background: url(./testbok.png)} 
.p3{ width:200px; height:200px; position:relative; margin-top:10px} 
.p4{  position:absolute; top:0; height:200px; width:200px; z-index:-1; background:#FFFFFF;filter:alpha(opacity=70);opacity:0.7;}

登录后复制

试图在一些SVG文本周围加上边框,我的结果会有所不同.

HTML :(使用静音类)

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="37.5" y="37.5"https://www.jb51.cc/tag/blat/" target="_blank">blate-x mute">X</text>
</svg>

CSS：

.ablate-x {
   font-size: 24px;
   color: gray;
   opacity: 0.5;
   font-weight: 900;
   cursor: hand;
   cursor: pointer;
}

.mute {
   opacity: 1;
   fill: red;
   stroke: red;
   stroke-width: 2px;
   /* we tried border: 2px solid red;   but it didn't work */
}

D3.js：

.on("click",function(d) {
    var selection = d3.select(this);
    selection.classed("mute",(selection.classed("mute") ? false : true));
 })

这里我们有没有静音类的X.

这里我们有X与静音类但没有边框

这就是我们试图让边框看起来像

注意：其父级是一个组,而不是HTML元素.

JS小提琴：
http://jsfiddle.net/chrisfrisina/yuRyr/5/

您发现SVG元素不支持CSS border属性.你的选择是

>画一个红色< rect>围绕文本作为边界>在外部< svg>上放置边框如果父元素是一个html元素.外部< svg> element是一个替换元素,将支持CSS border属性.

我有一个具有60％不透明度的div，以显示div后面的背景图像的一部分。因为不透明度为60％，所以该div中的文本显示为灰色。

是否还有重写这个级别，使文本显示黑色？

任何建议赞赏。

谢谢。

在背景而不是元素上设置不透明度。

background-color: rgba(255,0.6);

前一段时间我写了关于如何achieve this in a backwards compatible way。

我有一个div而我正在尝试围绕文字5px – 没有更多,而不是更少 – 但是有一些额外的空间被抛在那里,就像我的浏览器在我的脸上笑着,我徒劳地试图让它做我想要的做.

这是我使用的CSS：

div{
    font-family:'Arial',sans-serif;
    padding:5px;
    font-size:14px;
}

这是我的HTML：

<div>
    Sort By:
    <select>
        <option>Customer</option>
    </select>
    Search Customer:
    <input type="text">
</div>

(顺便说一句,输入和选择字段都没有样式.)

这是我在浏览器窗口中输入的输出

(通过Chrome的开发者控制台突出显示,您可以了解额外的间距)：

html output http://img715.imageshack.us/img715/2438/padding.png

等一下,那里发生了什么事？我已经有5px的填充,然后这个奇怪的内部填充.我在一个图像编辑器中测量过,而且额外的填充或者我应该调用它的是添加一个额外的8px的填充,顶部和底部.

以为这可能是一个线高问题 – 所以我设置为0.没有改变一个事情.尝试将其设置为负数.也没有工作事实上,Chrome与此无关,给了我一个错误.

那么这里有什么额外的东西呢？它有名字吗？我可以收缩吗我想要这些字母周围正好5px的空间,而不是近三倍的13px.

我很感谢帮助 – 提前感谢.

表单元素可以扩展包含元素.很难说,因为你没有因为某些原因将它们包含在你的屏幕截图中.

如果设置溢出：隐藏在您的div上,您可能会看到此行为停止.当然,你可能不想要这个;您可能会尝试手动设置这些表单元素的高度,并确保它们具有margin：0 set.