css3中国地图 |css3 背景不重复

/* 定义地图的宽高和背景颜色 */
.map {
width: 600px;
height: 400px;
background: #F5F5F5;
}
/* 定义每个省份的hover效果 */
.map .province:hover {
background: #FFD700;
}
/* 定义每个省份的颜色和坐标位置 */
.map #beijing {
fill: #86C166;
cursor: pointer;
transform: translate(35px, 40px);
}
.map #shanghai {
fill: #F58117;
cursor: pointer;
transform: translate(410px, 360px);
}
.map #tianjin {
fill: #C32615;
cursor: pointer;
transform: translate(180px, 90px);
}
/* ... 其他省份的CSS代码 ... */
/* 定义省份的SVG路径 */
.map path {
stroke: #FFF;
stroke-width: 1px;
stroke-linejoin: round;
stroke-linecap: round;
pointer-events: none;
}

通过以上CSS代码，大家可以创建一个简单的中国地图，并对每个省份进行颜色和位置的定义。当鼠标移动到省份上时，会触发hover效果，让地图更加生动。

通过这种方式，大家可以自己动手创建出一个属于自己的地图，而且可以非常灵活，进行各种美化和功能的添加。这样的做法可以节约成本，同时也可以让网站效果更加独特，吸引更多的用户。