全部！我遇到了一個 CSS 問題。下圖是我的網頁布局。我要實作的是組件 A、B 和 C 在各種尺寸的螢屏上保持不變，并且這些組件具有固定的邊距和填充。并且D有一個背景圖片覆寫了它的內容，并且這個背景圖片可以回應地覆寫沒有任何空白的D分量。對不起我的英語，不是母語人士。
我使用Vuetify和nuxtJS實作了這個布局，由于公司的規定，我不能上傳代碼，但我附加了我所做的類似作業。
<!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.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.a{
margin: 40px auto;
height: 200px;
background-color: red;
}
.b{
margin: 40px auto;
height: 200px;
background-color: yellow;
}
.c{
margin: 40px auto;
height: 200px;
background-color: blue;
}
.d{
margin-top: 40px;
height: 100%;
background-color: pink;
}
</style>
</head>
<body>
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>
</body>
</html>
我想要實作的是D組件的背景顏色或影像可以覆寫到螢屏的末尾并且不留下任何空白。它還可以進行回應式設計。
uj5u.com熱心網友回復：
然后你應該給你的盒子寬度。
.a, .b, .c{
width: 200px;
}
<!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.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.a{
margin: 40px auto;
height: 200px;
background-color: red;
}
.b{
margin: 40px auto;
height: 200px;
background-color: yellow;
}
.c{
margin: 40px auto;
height: 200px;
background-color: blue;
}
.d{
margin-top: 40px;
height: 100%;
background-color: pink;
}
.a, .b, .c{
width: 200px;
</style>
</head>
<body>
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>
</body>
</html>uj5u.com熱心網友回復：
編輯：我剛剛明白你想要做什么。position: absolute;如果您希望 d 組件在一個元素內填充您需要的所有螢屏position: relative;，例如您的整個頁面框。例子：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.relative {
position: relative;
}
.a {
margin: 40px auto;
height: 200px;
background-color: red;
}
.b {
margin: 40px auto;
height: 200px;
background-color: yellow;
}
.c {
margin: 40px auto;
height: 200px;
background-color: blue;
}
.a, .b, .c {
width: 300px;
}
.d {
height: 100%;
width: 100%;
background: url('https://via.placeholder.com/150x150');
background-size: cover;
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}<body class="relative">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>
</body>我曾經z-index:-1;將 d 元素放在其他元素后面。我還習慣background-size: cover;讓背景影像填滿所有空白空間。background-repeat: no-repeat;使影像不重復。此外，您需要width在絕對定位元素中使用。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/421165.html
標籤：