时间戳

首页 > 解决方案 > 如何调整放置在 CSS div 背景上的图像 gif 的大小

css - 如何调整放置在 CSS div 背景上的图像 gif 的大小

问题描述

    #box-2
    {
      width:50%;
      height:80%;
      background-color: rgba(177, 177, 177, 0.116);
      border:transparent;
      background-image:url(human.gif);
  
    }

b

#box-2
{
    width:50%;
    height:80%;
    background-color: rgba(177, 177, 177, 0.116);
    border:transparent;
    background-image:url(human.gif);
  
}
  <div 
          id="box-2">
             <p class="display-6">Information</p>
    
             <h6 style="text-align: center;">How to nagivate through the Map</h6>
    
            
             <div class="foo blue"></div><ul>Lecture halls</ul>
             <div class="foo orange"></div><ul>Eating Places</ul>
             <div class="foo purple"></div><ul>Residences</ul>
             <div class="foo black"></div><ul>School Services</ul>
             <div class="foo green"></div><ul>Schools</ul>
          
          </div>

我想知道如何调整我放在我的 div 上的 gif 的大小，我只在 CSS 背景上添加了 gif，而不是在 HTML 代码上

标签： css

解决方案

您可以使用 css 属性background-size。例如，如果您希望图像覆盖盒子，您可以选择cover. 您也可以输入固定值。有关更多信息，请参见此处：https ://developer.mozilla.org/de/docs/Web/CSS/background-size

#box-2 {
  width: 50%;
  height: 80%;
  background-color: rgba(177, 177, 177, 0.116);
  border: transparent;
  background-image: url(human.gif);
  background-size: cover;
}
<div id="box-2">
  <p class="display-6">Information</p>

  <h6 style="text-align: center;">How to nagivate through the Map</h6>


  <div class="foo blue"></div>
  <ul>Lecture halls</ul>
  <div class="foo orange"></div>
  <ul>Eating Places</ul>
  <div class="foo purple"></div>
  <ul>Residences</ul>
  <div class="foo black"></div>
  <ul>School Services</ul>
  <div class="foo green"></div>
  <ul>Schools</ul>

</div>

推荐阅读