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

Question

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

在下面的示例中，我希望.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

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

你好，如果愿意，你可以看到这个。

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

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

问题描述投票：-1回答：2

2个回答

最新问题

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

问题描述 投票：-1回答：2

2个回答

最新问题

问题描述投票：-1回答：2