<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
将导航栏的一整张背景图片用css分成不同部分
最新推荐文章于 2022-03-28 14:20:55 发布
本文介绍如何使用CSS将导航栏的整张背景图片切割成多个部分,实现灵活布局和定位。通过设置background-position和background-size属性,可以分别控制各个部分的显示效果,达到精细设计的目的。
摘要由CSDN通过智能技术生成