将导航栏的一整张背景图片用css分成不同部分

document_write

于 2019-08-11 19:42:41 发布

阅读量620

点赞数

本文链接：https://blog.youkuaiyun.com/document_write/article/details/99222765

版权

本文介绍如何使用CSS将导航栏的整张背景图片切割成多个部分，实现灵活布局和定位。通过设置background-position和background-size属性，可以分别控制各个部分的显示效果，达到精细设计的目的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div class="content" ref="bgColor">
    <div class="box">
      <div class="list">
        <div class="List"  v-for="(item,index) in list"><div class="listItem"></div><span class="item">{
  {item}}</span></div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: "example",
    data(){
      return{
        list:[
          "演唱会","话剧歌剧","休闲展览","体育赛事","音乐会","儿童亲子","戏曲综艺","舞蹈芭蕾","旅游玩乐"
        ]
      }
    }
  }
</script>

<style scoped>
  .list{
    width:212px;
    background-color: pink;
  }
  .List{
    display: flex;
    align-items: center
  }
  .listItem{
    background-image: url('http://dn-piaoniu-static.qbox.me/pc/home/img/categories.2a8c35e9