每當我像這樣匯入引導程式時
<link rel="stylesheet" href="./css/style.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
即使我沒有使用任何引導程式，它也會以某種方式覆寫我自己的 css 檔案。
我的 .css 看起來像這樣
html {
background-image: url(back.jpg);
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.box
{
margin: 80px; /* abstand au?erhalb*/
padding: 30px; /* abstand innerhalb*/
width: auto; /* l?nge breite*/
height: auto;
border-radius: 20px;
background-color: rgba(0, 0, 0, 0.4);
color: white; /*Schriftfarbe*/
}
;
這里沒有 Bootstrap
在這里使用 Bootstrap 樣式表
我的主要 index.php 看起來像這樣：
<!DOCTYPE html>
<html lang="de">
<head>
<title>Dashborad</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./css/style.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="/placeholder"></script>
</head>
<body>
<div class = "box">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</body>
uj5u.com熱心網友回復：
Bootstrap 樣式表設定樣式表body和許多其他元素的樣式（請閱讀https://getbootstrap.com/docs/5.1/content/reboot/），您的樣式表不會涉及這些元素。此外，如果您不希望 Bootstrap 覆寫您的樣式，正確的方法是始終在 Bootstrap之后包含您的樣式表。
您可以通過設定適當的 CSS 變數的值來擺脫正文背景：
body{
--bs-body-bg: transparent;
}
這是一個作業示例：
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style>
html {
background-image: url(https://via.placeholder.com/1600);
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
body {
--bs-body-bg: transparent;
}
.box {
margin: 80px;
/* abstand au?erhalb*/
padding: 30px;
/* abstand innerhalb*/
width: auto;
/* l?nge breite*/
height: auto;
border-radius: 20px;
background-color: rgba(0, 0, 0, 0.4);
color: white;
/*Schriftfarbe*/
}
</style>
<div class="box">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata.
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/473115.html