【问题标题】:CSS Background-color works bottom half onlyCSS 背景颜色仅适用于下半部分
【发布时间】:2019-05-29 09:24:30
【问题描述】:

我正在尝试使用 a 标签和 fontawesome 图标制作社交媒体按钮。 我想用css把整个的背景颜色变成黑色,但是当我尝试时只有下半部分变成黑色。

HTML:

<div class="social-media">
    <a class="social-media-icon">
        <i class="fa fa-instagram fa-4x" aria-hidden="true"></i>
    </a>
</div>

CSS(少):

.social-media{
    .social-media-icon{
        color: red;
        background-color: black;
    }
}

我该怎么办?

【问题讨论】:

    标签: html css


    【解决方案1】:

    使图标成为(内联)块元素。

    .social-media-icon {
      color: red;
      background-color: black;
      display: inline-block;
    }
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
    <div class="social-media">
      <a class="social-media-icon">
        <i class="fa fa-instagram fa-4x" aria-hidden="true"></i>
      </a>
    </div>

    【讨论】:

    【解决方案2】:

    首先将a tag 的显示更改为inline-block,因为它是一个内联元素,然后使用伪选择器:after 添加新的styling 并使用z-index 对齐fontawesome 图标的背面。

    .social-media-icon {
      display: inline-block;
      position: relative;
      color: red;
    }
    
    .social-media-icon:after {
      content: "";
      position: absolute;
      left: 2%;
      bottom: 8px;
      width: 95%;
      height: 25px;
      background: black;
      z-indeX: -1;
      border-bottom-right-radius: 10px;
      border-bottom-left-radius: 10px;
    }
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
    <div class="social-media">
      <a class="social-media-icon">
        <i class="fa fa-instagram fa-4x" aria-hidden="true"></i>
      </a>
    </div>

    【讨论】:

    • @Francisco 如果我是对的,那么您已要求将下半部分图标设置为黑色。这就是上面代码的作用。
    • 对不起,我的意思是我想让 整个 背景为黑色,但是当我尝试时它不起作用......抱歉造成混乱;)跨度>
    • 没关系@Francisco,是的,这就是混乱:-),如果你只是在 :after 中改变高度,就像这个 jsFiddle jsfiddle.net/kjok3e9q
    猜你喜欢
    • 1970-01-01
    • 2021-09-25
    • 2017-05-13
    • 2010-11-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-12-10
    • 2022-07-28
    相关资源
    最近更新 更多