html - 设置单个字母的背景(如 BBC)

Question

英国广播公司 Logo :http://www.bbc.com/ (这是 BBC 页面，从我试图重新创建的页面更新而来；细微差别)

我的目标是设置各个 BBC 字母的背景。我正在为我在 Udemy 上的一门类(class)重新制作网站。我在实际将背景设置为白色时没有遇到问题，但实际上在设置背景的宽度和高度时遇到了问题。

每当我在背景速记属性中指定宽度/高度时，都没有任何效果。

抱歉，如果我在这里遗漏了一些东西，第一个真正的帖子。

我目前的努力(示例):

HTML:

     <div id="logo">
       <div class="letter>
         <h1>B</h1>
       </div>
       <div class="letter>
         <h1>B</h1>
       </div>
       <div class="letter>
         <h1>C</h1>
       </div>
     </div>

CSS:

#logo {
  display: inline-block;
}

.letter {
  display: inline-block;
  color: #7A0000; (Set text to color of page background)
  background-color: #fff; (Want to create white box around each letter)
  background-size: 25px 25px; 
}

Answer 1

background-size 是设置背景图片的大小，不是background-color 的大小。对于设置宽度和高度，可以设置 div 那些尺寸。

.letter
{height:25px;
width:25px;
}