前端之家

  1. 首页
  2. 问答

CSS自举卡头透明不继承父背景颜色

• 问答

这是情况， 我有整个页面的背景图片。 .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>

CSS自举卡头透明不继承父背景颜色

mimiyou2004 回答：CSS自举卡头透明不继承父背景颜色

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

,

最简单的解决方案是具有静态背景，该背景与元素的宽度无关，然后将完全相同的背景应用于卡片。

我的评论示例：

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>

,

您好，如果愿意，您可以看到它。

.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,a molestie ante hendrerit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</span>   
            </div>  
        </div>
    </div>
</div>

background-colorcsstransparency
本文链接：https://www.f2er.com/2692063.html

大家都在问