我試圖在 html 中放置一個模糊的背景影像
<body>
<div class="fondoIndex"></div>
</body>
然后用css
.fondoIndex {
background-image: url("images/bg3.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
filter: blur(5px);
}
但它沒有任何效果。沒有顯示背景。如果我洗掉 close /div 標簽，背景影像會顯示并模糊，但整個身體也是如此。:S
謝謝你們。
uj5u.com熱心網友回復：
您只需指定元素的heightand width。
解釋
由于div元素為空，默認情況下其高度值為auto內容的高度。通過添加強制元素具有所需高度和寬度的 CSS 規則，它將顯示背景影像，因為它的高度和寬度大于 0。
.fondoIndex {
width: 400px;
height: 400px;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/9/96/Barbados_beach.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
filter: blur(5px);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
</head>
<body>
<div class="fondoIndex"></div>
</body>
</html>uj5u.com熱心網友回復：
.fondoIndex {
width: 200px;
height: 100px;
background-image: url("https://media.istockphoto.com/photos/beautiful-artistic-image-of-environment-nature-in-spring-or-summer-picture-id1314315360?b=1&k=20&m=1314315360&s=170667a&w=0&h=vZ7ZKu_qL1b0MSNQyC7ru9u9jwY4JcMPvdZP1Imh3K8=");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
filter: blur(5px);
}
body {
background-color: red;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
</head>
<body>
<div class="fondoIndex"></div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/520186.html