0 

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">

<style>

body {width:100%;
      height:100%;
      margin:0;
      padding:0;}

#star_box {width:100%;
           height:auto;
           overflow:hidden;
           display:block;
           background-image:url('https://www.rakuten.ne.jp/gold/sappun/promotion/test.jpg') ;
           background-size: cover;
           background-repeat: no-repeat;
           background-position: center top;}

.star {color:white;
       animation-name:zoomin;
       animation-duration:5s;
       text-align:center;
       animation-iteration-count:infinite;}

.star2 {color:white;
       animation-name:zoomin;
       animation-duration:5s;
       text-align:center;
       animation-iteration-count:infinite;
       animation-delay:.5s;}

@keyframes zoomin {
    0%{
 transform: scale(0,0) rotateZ(0deg);
    }
  25%{
   transform: scale(4,4) rotateZ(80deg); 
    }
  50%{
   transform: scale(0,0) rotateZ(0deg);
    }
  100%{
   transform: scale(0,0) rotateZ(0deg);
    }
}

#star_box > p:nth-child(1) {margin-left:450px;
                            margin-top:150px;}

#star_box > p:nth-child(2) {margin-left:400px;
                            margin-top:10px;}
                            
#star_box > p:nth-child(3) {margin-left:-450px;
                            margin-top:350px;}
                            
#star_box > p:nth-child(4) {margin-left:-530px;
                            margin-top:30px;}
                            
#star_box > p:nth-child(5) {margin-left:280px;
                            margin-top:-200px;}                         

#empty_box {width:80%;
            height:1200px;
            display:block;
            margin:0 auto;
            margin-top: -350px;}

#text {text-align:center;
       color:white;
       font-size:50px;
       margin-top:250px;
       opacity:0;
       transition:opacity .3s linear;}
       
#empty_box:hover ~ #text {opacity:1;}      

</style>


</head>
<body>

<div id="star_box">

    <p class="star">&#10022;</p>
    
    <p class="star2">&#10022;</p>
    
    <p class="star">&#10022;</p>
    
    <p class="star2">&#10022;</p>
    
    <p class="star">&#10022;</p>
    
    <div id="empty_box"></div>
    
    <p id="text">今すぐ見る&lt;/p>
</div>


</body>
</html>

你好！现在我有这个代码的问题，以使背景响应全尺寸。所以首先，它必须对移动设备有响应，其次，背景高度是 100%，没有内容，所以我可以一直看到完整的图像。我已经尝试过 background-size:cover 但它在我的代码中不起作用:(我应该在哪里修复以使背景变为全尺寸？

任何帮助将不胜感激。谢谢！:D

4

2 回答 2

1

usingheight将与您的容器相关，并且 usingbackground-size: cover将拉伸您的图像以匹配容器，这就是为什么它们都不能保证图像将是全屏大小的原因。

您可以使用vhandvw为此，如下所示：

.img {
 height: 100vh;
 width: 100vw;
 background-size: cover;
 background-repeat: no-repeat;
}

于 2021-01-11T02:22:12.370 回答
1

background-size: cover;将 id更改#star_box为background-size: contain;

#star_box {
  background-size: contain;
}
于 2021-01-11T05:29:19.547 回答