背景图片无法显示完整该怎办？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="css\index.css">
<!-- <link type="text/css" rel="stylesheet" href="css\mainpage.css"> -->
<title>个人博客主页</title>
</head>
<body>
<header>
<div id="video_block">
<video autoplay loop width=100% height=100% object-fit:fill;
position: fixed;
left: 0;
top: 0;
z-index: -9999;>
<source src="./video/页眉视频.mp4">
<source src="./video/页眉视频.webm">
<source src="./video/页眉视频.ogv">
<p>Sorry, your browser doesn't support the video element.</p>
</video>
</div>
</header>
</body>
</html>上为html代码，下为css代码
body{
background: url("../img/蓝海和沙滩.jpg") no-repeat;
background-size:100%;
background-attachment: fixed;
cursor: url("../img/鼠标样式.ico"),auto;
margin: 0;
padding: 0;
/* background-color: yellow; */
}
header div#video_block{
width:100%;
height:100%
}/* 用百分比设置宽度放大缩小浏览器元素大小都不变 */
#wew:before {
background: url("../img/蓝海和沙滩.jpg") no-repeat;
background-size:100%;
background-attachment: fixed;
width:100%;
height: auto;
content: "";
position: absolute;
top: 0;
left: 0;
z-index: -1;
/* 让一个层在所有层的下面当背景的方法。 */
-webkit-filter:blur(5px);
/* blur(5px)是对图像进行模糊处理 */
filter: blur(px);
background-position: center top
}
nav{
background-color: #b39858;
width:100%;
height: 50px;
margin:0 auto;
padding: 10px;
}
nav #nav-inner{
width: 480px;
margin: 0 auto;
height: 61px;
}
nav ul{
list-style-type: none;
padding: 0;
margin: 0;
}
nav a{
text-decoration: none;
color: #fff;
}
nav li{
float: left;
position: relative;
vertical-align: bottom;
font-size: 16px;
font-weight: normal;
padding: 0 25px;
height: 41px;
line-height: 41px;
}
nav a:hover{
color:#fff;
/* background-color: #85754d; */
}
nav li:hover{
background-color: #85754d;
padding: 0 25px;
height: 41px;
}
div#container{
padding:20px;
width: 1100px;
margin:20px auto;
background-color: black;
overflow: hidden;
/* 当父div没有设置高度，浮动子类div 是有高度的时候，
只有加入overflow: hidden;一句话才会和浮动子类div高度齐平 */
}
div#sidebar{
width: 360px;
float: left;
margin: 0;
/* padding: 16px 16px 6px 16px; */
/* 子头部元素与父元素之间的间距用padding调 */
/* margin-top: 80px; */
/* sidebar与header之间的间距调margin-top,sidebar与footer之间的间距调margin-bottom */
background-color: #fff;
background-color: red;
box-shadow: 0 2px 4px 0 rgb(0 0 0 / 5%);
border: 1px solid rgba(0,0,0,.125);
border-radius: .25rem;
}
div#sidebar-header{
padding: 0px 1px 6px 16px;
height: 104px;
background-color: #6c757d;
color: hsla(0,0%,100%,.5);
}
div#sidebar-header::after{
text-align: center;
box-sizing: border-box;
font-size: 20px;
content: "⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶⁶66⁶⁶⁶⁶ ₆₆₆₆可以啊.这波 ₆₆₆₆⁶⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶⁶⁶⁶⁶⁶⁶⁶⁶66⁶⁶⁶⁶ 卧槽⁶⁶⁶⁶⁶⁶⁶⁶⁶⁶⁶⁶⁶ 666₆₆₆₆₆₆₆ 666 666 ⁶⁶⁶⁶⁶⁶₆₆₆₆₆₆₆⁶⁶⁶⁶⁶⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶⁶⁶";
}
div#sidebar-content{
background-color: #e9ecef;
/* padding: 0 1.25rem 1.25rem; */
}
span.name{
padding: 0px 26px 6px 52px;
font-size: 25px;
margin-left: -83px;
/* text-align: center; */
font-weight: bold;
}
img.icon{
width:30px;
height:30px;
}
img.sidebar-content-img{
position: relative;
left: 100px;
width: 150px;
height: 150px;
top: -40px;
background: #fff;
border: 4px solid #fff;
box-sizing: border-box;
border-radius: 100%;
}
/* div#personal_info{
margin:10px 15px;
/* background-color: yellowgreen; */
ul,li{
margin:0;
padding: 0;
list-style: none;
}
li{
display: flex;
/* margin: 20px 10px; */
padding: 8px 6px;
}
span.university{
font-weight: bold;
font-size: 16px;
padding-top: 8px;
margin-left: 3px;
}
div#main{
/* float: right; */
/* width:700px; */
margin:0px;
margin-left:410px;
padding-left:10px;
background-color: yellowgreen;
}
h1{
margin: 0px;
padding:0px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(0,0,0,.0625)!important;
}
footer {
background-color: #675c47;
color: #efe5d0;
text-align: center;
padding: 15px;
/* margin: 0px 10px 10px 10px; */
font-size: 90%;
}
背景图
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
试试
background-size:100% 100%;background-size:100%;这行不对。改成background-size: contain;让你的图片全显示，其他位置留白