通过背景颜色在文字上显示背景颜色

我试着仰视怎么过让文字透明的，这样就可以看到图像的通过文字的背景，也没有找到这事。这是我将鼠标悬停在链接上时的样子。

下面是DIV的代码，我在做这个。

#learnmore{ 
 
    padding: 10px; 
 
    margin: 10px; 
 
    border: 2px solid white; 
 
    color: white; 
 
} 
 

 
#learnmore:link{ 
 
    padding: 10px; 
 
    border: 2px solid white; 
 
    color: white; 
 
} 
 

 
#learnmore:visited{ 
 
    padding: 10px; 
 
    border: 2px solid white; 
 
    color: white; 
 
} 
 

 
#learnmore:hover{ 
 
    background: white; 
 
    color: transparent; 
 
} 
 

 
#learnmore:active{ 
 
    padding: 10px; 
 
    border: 2px solid white; 
 
    color: white; 
 
}

<div id="offer"> 
 
    <img src="imgs/detroit.jpeg" title="" alt=""> 
 

 
    <h1>Offer Header</h1> 
 

 
    <p>Here is a little bit of information about our offer.</p> 
 

 
    <a href="" id="learnmore">Learn More</a> 
 
    <a href="" id="scrolldown"><img src="imgs/down arrow.png"></a> 
 
</div>

有谁知道这是可能的吗？

来源

2016-12-22 Joshua Blevins

应该'#learnmore：hover { background：white; 颜色：透明; }'be' #learnmore：hover { background：transparent; 颜色：透明; }'？为什么要将悬停背景设置为白色？ – gabe3886

试试这个#learnmore：hover {background：none; color：#fff;} –

@ gabe3886我认为op想要一个“雕刻出来”的文字效果，文字是透明的，并且会采用标题背景的颜色。 –

我建议这个假修复除非你想处理跨浏览器支持。

坐落在:hover文本颜色以匹配头背景这是它下面的部分的颜色。

body { 
 
    background: #535686; 
 
    font-size: 22px 
 
} 
 
a { 
 
    text-decoration: none 
 
} 
 
#learnmore, 
 
#learnmore:link, 
 
#learnmore:visited, 
 
#learnmore:active { 
 
    padding: 10px; 
 
    border: 2px solid white; 
 
    color: white; 
 
} 
 
#learnmore { 
 
    margin: 10px; 
 
} 
 
#learnmore:hover { 
 
    background: white; 
 
    color: #535686 
 
}

<div id="offer"> 
 
    <img src="imgs/detroit.jpeg" title="" alt=""> 
 
    <h1>Offer Header</h1> 
 
    <p>Here is a little bit of information about our offer.</p> 
 
    <a href="" id="learnmore">Learn More</a> 
 
    <a href="" id="scrolldown"></a> 
 
</div>

来源

2016-12-22 17:47:09

我没有使用背景颜色。它将成为一个形象。 –

同样的解决方法仍然适用，你只需要得到你的按钮下的背景图像部分的颜色值 - 这是我在上面使用的值。 –

怎么过让文字透明的，这样就可以通过文字看到图像的背景，

您可以使用mix-blend-mode: hard-light;。你也有很多的代码冗余（你有相同的规则:link,:active等），我已经通过使用,重构和分组在一起。

#learnmore, 
 
#learnmore:link, 
 
#learnmore:visited, 
 
#learnmore:active { 
 
    padding: 10px; 
 
    margin: 10px; 
 
    border: 2px solid white; 
 
    color: white; 
 
    font-size:40px; 
 
    text-decoration:none; 
 
} 
 
#learnmore:hover { 
 
    background-color:white; 
 
    mix-blend-mode: hard-light; 
 
    color: purple; 
 
} 
 
body { 
 
    background-color: purple; 
 
}

<div id="offer"> 
 
    <p>Here is a little bit of information about our offer.</p> 
 

 
    <a href="" id="learnmore">Learn More</a> 
 
</div>

来源

2016-12-22 17:48:02

这在Chrome中运行良好（因为某些原因甚至FF ?!），但最终以纯色文本即使：在IE中悬停 –

@ILoveCSS哦..虽然没有检查IE .. ..谢谢你的头up ..我会看到可以做些什么 –

你忘了将背景颜色添加到悬停的链接上。当bg颜色变为白色时它不起作用。 –

您是否尝试过使用不透明？

#learnmore: hover{ 
     background: white; 
     color: black; 
     opacity:.5; 
    }

来源

2016-12-22 21:55:30

你甚至可以将其切换。背景：黑色;白颜色; –

通过背景颜色在文字上显示背景颜色

回答

相关问题