Question

我想为元素中的文本添加一些不透明度。但我不想在同一元素中对图像应用任何不透明度。有没有办法做到这一点？我想要实现的是在文本不透明度的元素上显示一个微调器gif。

<!DOCTYPE html>
<html>
<head>
<style>

h1 {
opacity:0.1;
background: url('spinner.gif') no-repeat center !important;
}
</style>
</head>
<body>

<h1>This is a heading.this is text test</h1>

</body>
</html>

Answer 1

我认为使用其他<div>是错误的解决方案 - 请不要传播div-itis病毒。正确的方法是使用rgba颜色。

h1 {
    color: rgba(255, 255, 255, 0.1); /* white with 0.1 opacity */
    background: url(...) ...;
}

顺便说一句，请不要使用!important。＆＃34;自恋的css属性模式＆＃34;可能是你在CSS中可以采用的最糟糕的事情。

Answer 2

只需将它放在div中并将div设置为具有背景图像，然后使h2具有不透明度，

示例 - https://jsfiddle.net/ch6fbqs7/

<div id="text">
<h1>This is a heading.this is text test</h1>
</div>

CSS

#text {
    background: url('http://i1-news.softpedia-static.com/images/news2/Picture-of-the-Day-Real-Life-Simba-and-Mufasa-Caught-on-Camera-in-Tanzania-392687-2.jpg') no-repeat center !important;  
}

#text h1 {
opacity:0.1;  
}

Answer 3

将标题h1放入div中，然后使用所需的背景图像作为div背景，然后可以自由设置h1文本的不透明度。见下文：

<!DOCTYPE html>
<html>
<head>
<style>

.someClass {
background: url('spinner.gif') no-repeat center !important;
}
.someClass h1 {
opacity:0.1;
}

</style>
</head>
<body>

<div class="someClass">
    <h1>This is a heading.this is text test</h1>
</div>

</body>
</html>

Answer 4

使用包装div来保存背景图像（如已经建议的那样）没有错，如果这对你的图像最有效，但基于简单的加载微调器的想法，它可能是最干净的只使用RGBA颜色对于文本：

https://jsfiddle.net/kyjp4vf9/

小提琴使用彩色背景，但它与图像的结果相同。 opacity和rgba有类似的浏览器支持，最值得注意的是IE9适用于两者，而IE8通常不支持（如果您不介意使用-ms-filter规则，它会部分支持不透明度

如何仅在文本中添加不透明度而在同一元素中没有任何不透明度的情况下离开图像？

4 个答案: