css引导卡头透明不继承父背景颜色

css引导卡头透明不继承父背景颜色,css,transparency,background-color,Css,Transparency,Background Color,情况是这样的, 我有整个页面的背景图像。.container div具有白色背景色。我希望部分内容(例如引导卡头)是透明的,并显示背景图像,因此卡头不继承容器白色背景。这可能吗 在下面的示例中,我希望.card头元素在将图像作为背景之前是透明的 <div style='background: url("img/bg.png");background-size: cover;'> <div class="container" style="background-color

情况是这样的, 我有整个页面的背景图像。.container div具有白色背景色。我希望部分内容(例如引导卡头)是透明的,并显示背景图像,因此卡头不继承容器白色背景。这可能吗

在下面的示例中,我希望.card头元素在将图像作为背景之前是透明的

<div style='background: url("img/bg.png");background-size: cover;'>
    <div class="container" style="background-color:white">
        <div class="card">
            <div class="card-header">
                <span>header</span> 
            </div>
            <div class="card-body">
                <span>Body</span>   
            </div>  
        </div>
    </div>
</div>

标题
身体

您好,如果您愿意,您可以看到这个

.card header{背景色:透明;}
.card body{背景色:#ccc;}

标题
Lorem ipsum dolor sit amet,是一位杰出的献身者。整数aliquet eleifend augue ac viverra。拉齐尼亚·拉奥里特·马萨(Maecenas lacinia Laoret massa),亨德雷特·里索斯(vel hendrerit risus)。Phasellus和velit urna。奎斯克·尼布·萨皮恩,布兰迪·希特·阿梅特·努克身份证,ultricies ante拍卖行。南威尔·努克和尼西·瓦里乌斯·森佩尔。在sodales sapien Elite中,一个设施是一个额外的设备ac.Phasellus elementum est diam,但它是一个不确定的事实。一个不确定的元素leo nec nunc feugiat,一个在hendrerit之前的分子。虎口浮雕和肘部浮雕同侧前庭;

引导101模板
.左滑动条{宽度:90px;高度:100vh;背景色:#C03;浮动:左;}
.右侧幻灯片内容{宽度:计算(100%-90px);左侧填充:90px;位置:相对;}
.card{宽度:100%;位置:相对;背景色:#fff;}
.卡头{宽度:100%;位置:相对;填充:30px 20px;背景色:#900;}
.卡体{宽度:100%;位置:相对;}
标题
Lorem ipsum dolor sit amet,是一位杰出的献身者。整数aliquet eleifend augue ac viverra。拉齐尼亚·拉奥里特·马萨(Maecenas lacinia Laoret massa),亨德雷特·里索斯(vel hendrerit risus)。Phasellus和velit urna。奎斯克·尼布·萨皮恩,布兰迪·希特·阿梅特·努克身份证,ultricies ante拍卖行。南威尔·努克和尼西·瓦里乌斯·森佩尔。在sodales sapien Elite中,一个设施是一个额外的设备ac.Phasellus elementum est diam,但它是一个不确定的事实。一个不确定的元素leo nec nunc feugiat,一个在hendrerit之前的分子。虎口浮雕和肘部浮雕同侧前庭;
$(函数(){
$(“.eq height”).matchHeight(可选);
});
最简单的解决方案是使用静态背景,它与元素的宽度无关,然后将完全相同的背景应用于卡片

我评论中的例子:

body,
.bg{
背景:无重复url(https://placeimg.com/640/480/nature)固定100%100%;
}
.集装箱{
边框:1px实心;
填充:15px;
利润率:50像素;
}
.卡头,
.卡体{
高度:200px;
}

标题
身体

如果您提供代码沙盒示例将非常有用。您不能这样做。这是不可能的。你不能忽视这样的背景我就是这么想的。。有什么窍门可以做到这一点吗?如果我理解正确,你希望背景通过面板的白色背景显示,就像纸上的一个洞?最简单的解决方案是使用静态背景,它与元素的宽度无关,然后将完全相同的背景应用于卡片。添加a给我们一些开始的东西,大多数情况下你只需要添加一些CSS。是的,我可以将背景图像添加到卡片上,但这不是你想要的效果,因为你说ot必须是纸上的一个洞是的,但问题是容器必须有一个白色背景。你能告诉我网站的设计吗?我会做的很简单。我添加了一张图片来显示我的内容,红色/蓝色背景是页面的主要背景。我正在处理HTML和CSS,请参考您的图像。mm否…卡片标题必须显示文档背景图像。是但否…因为标题背景必须与完整背景匹配,就像纸上的一个洞。您的解决方案意味着所有标题的背景都是相同的,而不是想要的效果。@Arbiz我的示例没有在标题中显示整个背景。就像一张纸上的一个洞。你仍然可以玩周围的背景属性,这样图像将不仅仅是静态的,但也与您的内容移动。(好像你要将纸张和背景一起移动)是的,这是。非常聪明干净的解决方案,谢谢!