css一些注意事项

xixixin_2025-04-15 8:34

css一些注意事项

css 复制代码

.bg_ {
		background-image: url('/static/photo/activity_bg.png');
		background-size: 100% auto;
		background-repeat: no-repeat;
		background: linear-gradient(to bottom, #CADCEA, #E8F3F6);
		min-height: 100vh;
}

背景图片路径正确但是并没有显示

css 复制代码

// 方案1：将图片和渐变合并到同一个 background 属性中
background: 
    linear-gradient(to bottom, #CADCEA, #E8F3F6),
    url('/static/photo/activity_bg.png') no-repeat;
background-size: 100% auto;

// 方案2：使用 background-image 同时声明图片和渐变
background-image: 
    linear-gradient(to bottom, #CADCEA, #E8F3F6),
    url('/static/photo/activity_bg.png');
background-size: 100% auto;
background-repeat: no-repeat;

背景图片没有显示的原因是因为 background 属性覆盖了 background-image。在CSS中，background 是一个复合属性，当你使用它时，会重置所有其他背景相关的属性（包括 background-image）。