Voici la situation, J'ai une image d'arrière-plan pour la page entière. Le .Container Div a une couleur de fond blanc. Je voudrais que les parties du contenu (par exemple, une en-tête de carte bootstrap) soient transparentes et montrent l'image d'arrière-plan, donc l'en-tête de la carte n'hérite pas à l'arrière-plan blanc du conteneur. Est-ce même possible?
Dans l'exemple suivant, j'aimerais que l'élément d'en-tête .Card soit transparent à avoir l'image comme arrière-plan. 
3 Réponses :
Bonjour, vous pouvez voir ceci si vous le souhaitez.
p>
<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>oui mais le problème est que le conteneur doit avoir un fond blanc
Ok pouvez-vous me montrer la conception du site Web? que je vais faire facilement
J'ai ajouté une photo pour montrer ce que je suis à propos, le fond rougeâtre / bleuâtre est le fond principal de la page
Je traite HTML et CSS en référence à votre image.
<!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>MM NO ... L'en-tête de la carte doit afficher l'image de fond du document.
La solution la plus facile serait d'avoir un arrière-plan statique, qui n'est pas lié à la largeur d'un élément, puis appliquez également le même arrière-plan de la carte. P>
Exemple de mon commentaire: p>
p>
<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>
Oui mais non ... comme l'arrière-plan doit correspondre à l'arrière-plan complet, comme un trou dans un papier. Votre solution signifie que l'arrière-plan sera le même pour tous les en-têtes qui n'est pas l'effet recherché.
@Arbiz Mon exemple ne montre pas tout le fond de l'en-tête. Juste comme un trou dans un morceau de papier. Vous pouvez toujours jouer avec les propriétés de fond, de cette façon que l'image ne sera pas juste statique, mais également bouger avec votre contenu. (Comme si vous alliez déplacer le papier et le fond ensemble)
Oui c'est c'est. Solution très intelligente et propre, merci!
Serait utile si vous fournissez un exemple de sandbox de code.
Vous ne pouvez pas faire ça. Ce n'est pas possible. Vous ne pouvez pas Ignorer un fond comme ça.
C'est ce que je pensais .. n'importe quel tour pour y parvenir?
Si je vous comprends correctement, vous voulez que l'arrière-plan apparaisse dans le fond blanc du panneau, comme un trou dans un papier? La solution la plus facile serait d'avoir un arrière-plan statique, qui n'est pas lié à la largeur d'un élément, puis appliquez également le même arrière-plan de la carte. Ajouter un Exemple reproductible minimal pour nous donner quelque chose à démarrer, surtout, il vous suffit d'ajouter du CSS.
Oui, je pourrais ajouter l'image d'arrière-plan à la carte mais ce n'est pas l'effet recherché comme vous l'avez dit, OT doit être un trou dans un papier
J'ai ajouté une photo pour montrer ce que je suis à propos, le fond rougeâtre / bleuâtre est le fond principal de la page