如何使用CSS将文本颜色作为背景图像？
Sid Sss
我想输出如下图所示的图像。
这是我的代码：
https://jsfiddle.net/sidh_41/t7sbc2zf/
.card-text
{
background: #1f2227ab;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="card bg-dark text-white">
<img src="https://images.pexels.com/photos/1005417/pexels-photo-1005417.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=100&w=240" class="card-img" alt="...">
<div class="card-img-overlay">
<h5 class="card-title">B</h5>
<p class="card-text">
Content here.
</p>
</div>
</div>
</div> 丹斯曼
这是使用的解决方案 mix-blend-mode: screen;
https://jsfiddle.net/08rh23tw/
.card-text {
background: white;
color: #000;
height: 100%;
mix-blend-mode: screen;
display: flex;
justify-content: center;
align-items: center;
font-size: 80px;
text-align: center;
padding: 30px;
}
.card {
width: 400px;
height: 600px;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card bg-dark text-white">
<img src="https://images.pexels.com/photos/1005417/pexels-photo-1005417.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=100&w=240"
class="card-img" alt="...">
<div class="card-img-overlay">
<p class="card-text">
Content here.
</p>
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
Turbolinks将载波图像作为CSS背景图像
- 2
为QlineEdit设置背景图像时，如何在QLineEdit中设置文本颜色
- 3
如何使用CSS设置类似横幅的背景图像
- 4
使用CSS将背景图像添加到div
- 5
使用CSS更改背景图像的宽度
- 6
响应英雄图像作为CSS背景图像？
- 7
仅部分图像显示为我的背景图像。如何使用CSS获取完整图像作为背景？
- 8
如何使用CSS在DIV标签上添加背景图像
- 9
如何使CSS背景图像响应？
- 10
如何使用JQuery替换CSS背景图像并保持渐变？
- 11
引用PrimeFaces图像资源作为CSS背景图像URL
- 12
如何使用“材料设计”图标作为CSS背景图像值？
- 13
如何将Javascript元素放入CSS背景图像
- 14
背景图像或背景颜色？
- 15
响应英雄图像作为CSS背景图像？
- 16
仅部分图像显示为我的背景图像。如何使用CSS获取完整的图像作为背景？
- 17
如何使CSS背景图像响应？
- 18
使用图像精灵作为CSS背景图像的自适应网格
- 19
使用img src作为背景图像
- 20
如何使用css / jquery / html创建滚动背景图像
- 21
如何使用CSS设置正文标签的背景图像？
- 22
如何使用字体图标作为背景图像？
- 23
如何仅使用 CSS 过渡元素的多个背景图像
- 24
CSS 背景图像使颜色变暗
- 25
如何使用引导程序 3 将文本与背景图像的底部对齐
- 26
如何使用 css 样式标签更改 html 背景图像？
- 27
如何在媒体查询中使用 API 返回的图像作为背景图像？
- 28
如何在媒体查询中使用 API 返回的图像作为背景图像？
- 29
如何使用填充垂直/水平居中 CSS 背景图像
我来说两句