Question

我希望你一切都好！

可以像设置标签一样设置100％高和100％宽的图像背景，以便在调整浏览器窗口大小时可以保留宽高比。???

我希望获得与附加代码相同的效果，但是使用背景图像进行除法创建。

感谢您的关注！

*{
margin:0px;
padding:0px;
box-sizing: border-box;
}
header{

    
}


.image{

height:100%;
width: 100%;

  

}
.main-nav{
width:100%;
height:60px;
display:flex;
flex-wrap:wrap;
z-index: 1000;
background-color:#080808;
position:relative;
}
.side-nav p{
 text-decoration: none;
color:#000000;
font-size:22px;
font-family: myriad pro;
white-space: nowrap;  
padding:10px 6px;
overflow: hidden;
white-space: nowrap;
opacity:0.5;
transition: all 0.3s ease-in-out; 
}

.side-botton{
width:60px;
height:100%;
background-image:url("botton.png");
background-position:center;
background-repeat: no-repeat;
background-size:80%;
cursor: pointer;



background-color:#ff962d;

}

.main-nav ul{
display:flex;
flex-wrap:wrap;

}
.main-nav ul li{
list-style:none;
line-height: 60px;
}

.main-nav ul li a {
text-decoration:none;
padding:10px;
font-size:22px;
color:white;
font-family: myriad pro;



}
main-nav ul li hover{
    color:yellow;
}

.side-nav{
background-color:#ff962d;
position:fixed;


width:60px;
height:calc(100% - 60px);
visibility:hidden;
transition: all 0.3s ease-in-out;
position:absolute;

}
.side-nav ul li a {
    text-decoration: none;
    color:white;
font-size:22px;
font-family: myriad pro;
white-space: nowrap;
opacity:0;
transition: all 0.3s ease-in-out; 



}
.side-nav ul li {
list-style: none;
padding:10px 6px;
z-index: 1000;
overflow: hidden;


}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>



 <img class="image "src="cover.jpg">   
    

    <nav class="main-nav">
<div class="side-botton" onclick="rollDownMenu()"></div>
<ul> 
<li><a href=""> Home </a></li>
<li><a href=""> Faq </a></li>
<li><a href=""> About Us </a></li>
<li><a href=""> Services </a></li>

</ul>


</nav>

<div class="side-nav" >
<ul> 
<p>Projects</p>
<li><a href=""> Services </a></li>
<li><a href=""> Offers </a></li>
<li><a href=""> Statistic </a></li>
<li><a href=""> Info </a></li>

</ul>
</div>

    <script src="java.js"></script>


</body>
</html>

谢谢！

Answer 1

背景图片：保留浏览器窗口的长宽比：

尝试一下：

background-size：封面；
背景重复：不重复；

Answer 2

如果您希望图像覆盖整个屏幕并且不被裁切（丢失其比例），请使用：

background-repeat:no-repeat;
background-size:100% 100%;

如果您希望图像覆盖整个屏幕并被裁剪（保持其比例），请使用：

background-repeat:no-repeat;
background-size:cover;

如果您不希望图像覆盖整个屏幕并且不被裁剪（保持其比例），请使用：

background-repeat:no-repeat;
background-size:contain;

使用此链接可以更好地理解： https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain

Answer 3

尝试一下，希望对您有帮助

html { 
      background: url(images/bg.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
   }

背景图片：保留浏览器窗口的长宽比

3 个答案: