Question

BBC Logo：http://www.bbc.com/（这是自我试图重新创建的BBC页面以来的更新;微妙的差异）

我的目标是设置单个BBC字母的背景。我正在重建这个网站，参加我正在接受Udemy的课程。我实际上将背景设置为白色并没有遇到麻烦，但实际上是设置背景的宽度和高度。

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

对不起，如果我在这里留下一些东西，请先发帖子。

我目前的努力（样本）：

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是设置背景图像的大小，而不是背景颜色的大小。对于设置宽度和高度，可以将div设置为这些尺寸。

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

Answer 2

如果要将.letter的高度设置为25px，请确保将h1的字体大小设置为小于25px。您还应该删除h1标签的顶部/底部边距，否则它将开箱即用。

.letter h1{
    font-size:20px;
    margin:0px;
}

这是demo

设置个人信件的背景（如BBC）

2 个答案: