css bootstrap заголовок карты прозрачный, не наследует родительский цвет фона - PullRequest
Новая
       80

css bootstrap заголовок карты прозрачный, не наследует родительский цвет фона

0 голосов
/ 29 января 2020

Вот ситуация, у меня есть фоновое изображение для всей страницы. Div .container имеет белый цвет фона. Я хотел бы, чтобы части содержимого (например, заголовок карты bootstrap) были прозрачными и отображали фоновое изображение, поэтому заголовок карты не наследовал белый фон контейнера. Возможно ли это вообще?

В следующем примере я бы хотел, чтобы элемент .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>

enter image description here

Ответы [ 3 ]

0 голосов
/ 29 января 2020 

<!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>
0 голосов
/ 29 января 2020

Самым простым решением было бы иметь фон * stati c, который не привязан к ширине элемента, а затем применить тот же фон к карте.

Пример из моего комментария: 

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>
0 голосов
/ 29 января 2020

Здравствуйте, вы можете увидеть это, если хотите. 

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