背景图片随着内容的宽度而自适应

zhl_cafe_noir

已于 2022-03-07 17:09:36 修改

阅读量1k

点赞数

分类专栏：前端文章标签： css3 css html

于 2022-03-07 17:07:57 首次发布

本文链接：https://blog.csdn.net/zhl_cafe/article/details/123334553

版权

前端专栏收录该内容

31 篇文章

订阅专栏

问题：一开始用div元素，给div元素加上背景图，想让背景图片随着内容的大小而变化，但是实际是背景图片的宽度是父元素的宽度（即100%宽）

解决办法：变为行内元素即可：

代码如下：

<body>
  <style>
    .container{
      text-align: center;
      height: 30px;
      line-height: 30px;
      overflow: hidden;
      white-space: nowrap;
      padding: 0 20px;
      background: url(bq.png) no-repeat center;
      background-size: 100% 100%;
      display: inline-block;
    }
  </style>
  <div class="container">这是测试界面呀</div>
</body>