如何在不添加太多内容的情况下增加图像的背景尺寸？

Question

我正在尝试在背景上添加背景图像，我可以做到这一点，但它没有显示我使用此代码的图像的完整尺寸。当我尝试使用背景大小自动时，我得到了正确的宽度，但高度很小，我知道这取决于内容大小。但还是有什么办法<div style="background: url('https://firebasestorage.googleapis.com/v0/b/growthfilepractice.appspot.com/o/1%20(2).jpg?alt=media&token=48244df9-a2bb-412a-81f5-854e2dbc4939');background-repeat: no-repeat;background-size:500px 500px;">  <a href ="https://github.com/" style="text-decoration: none;">    <table>      <tr>        <td><h3 style="color: #fff;">Amarjeet Singh</h3></td>      </tr>      <tr>      </tr>    </table>  </a></div>

Answer 1

该图像被设置为您的背景<div>，因此它的大小将取决于该图像的width和。因此，如果高度较大，则会显示更多内容。只是为了说明，请检查下面我的代码。我已经给出了a ，现在图像显示了该高度。height<div>background-image<div>height : 600px

因此，简而言之，您的背景图像仅显示元素的大小。元素越大，图像就会出现越多。

<div  class="container" 

      style=" height: 600px; /* Just to illustrate */

              position: relative;

              background: url('https://firebasestorage.googleapis.com/v0/b/growthfilepractice.appspot.com/o/1%20(2).jpg?alt=media&token=48244df9-a2bb-412a-81f5-854e2dbc4939');

              background-repeat: no-repeat;

            background-size:500px 500px;">

  <a  class="nameAnchor" 

      href ="https://github.com/" 

      style=" text-decoration: none;

              position: absolute;

              color: white;

              left: 10px; /* Set your Left position here */

              top: 100px; /* set your top position here */

  ">

    <span>Amarjeet Singh</span>

  </a>

</div>

Answer 2

我建议你设置背景大小：封面。如果您想要的话，这会自动将其设置为完整尺寸。