cssbootstrap卡片header转parent不继承parent背景色

Question

情况是这样的，我有整个页面的背景图片。 .container div 具有白色背景颜色。我希望部分内容（例如 bootstrap 卡片 header）是透明的并显示背景图像，因此卡片 header 不继承容器白色背景。这可能吗？

在下面的示例中，我希望 .card-header 元素是透明的，因此将图像作为背景。

<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>

Answer 1

你好，喜欢的话可以看看

.card-header { background-color:transparent;}
.card-body { background-color:#ccc;}

<div style='background-image: url("https://www.liberaldictionary.com/wp-content/uploads/2018/12/pattern.jpg"); background-size: cover;'>
    <div class="container">
        <div class="card">
            <div class="card-header">
                <span>header</span> 
            </div>
            <div class="card-body">
                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquet eleifend augue ac viverra. Maecenas lacinia laoreet massa, vel hendrerit risus. Phasellus et velit urna. Quisque nibh sapien, blandit sit amet nunc id, auctor ultricies ante. Nam vel nunc ut nisi varius semper. In sodales sapien elit, a facilisis quam ultrices ac. Phasellus elementum est diam, ut faucibus dolor dictum id. Aliquam elementum leo nec nunc feugiat, a molestie ante hendrerit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</span>   
            </div>  
        </div>
    </div>
</div>

Answer 2

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

 <!-- Latest compiled and minified CSS -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
 
 <style>
  .left-slide-bar { width: 90px; height: 100vh; background-color: #C03; float: left;}
  .right-slide-content { width:calc(100% - 90px); padding-left:90px; position:relative;}
  
  .card { width:100%; position:relative; background-color:#fff;}
  .card-header { width:100%; position:relative; padding:30px 20px; background-color:#900;}
  .card-body { width:100%; position:relative;}
 </style>
 
  </head>
  <body>
    
 <div class="mainbody">
  <div class="left-slide-bar">
  
  
  </div>
  <div class="right-slide-content">
   <div class="container-fluid">
    <div class="row">
     <div class="col-md-4">
      <div class="card">
       <div class="card-header">
        <span>header</span> 
       </div>
       <div class="card-body">
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquet eleifend augue ac viverra. Maecenas lacinia laoreet massa, vel hendrerit risus. Phasellus et velit urna. Quisque nibh sapien, blandit sit amet nunc id, auctor ultricies ante. Nam vel nunc ut nisi varius semper. In sodales sapien elit, a facilisis quam ultrices ac. Phasellus elementum est diam, ut faucibus dolor dictum id. Aliquam elementum leo nec nunc feugiat, a molestie ante hendrerit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</span>   
       </div>  
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

 <script src="https://brm.io/js/libs/matchHeight/jquery.matchHeight.js"></script>
 <script>
  $(function() {
   $('.eq-height').matchHeight(options);
  });
 </script>
  </body>
</html>

Answer 3

Easiest solution would be to have a static background, which is not tied to the width of an element, then also apply the very same background to the card.

我评论中的示例：

body,
.bg {
  background: no-repeat url(https://placeimg.com/640/480/nature) fixed 100% 100%;
}

.container {
  border: 1px solid;
  padding: 15px;
  margin: 50px;
}

.card-header,
.card-body {
  height: 200px;
}

<div class="container" style="background-color:white">
  <div class="card">
    <div class="card-header bg">
      <span>header</span>
    </div>
    <div class="card-body">
      <span>Body</span>
    </div>
  </div>
</div>

cssbootstrap卡片header转parent不继承parent背景色

css bootstrap card header transparent not inherit parent background colour

css

transparency

background-color