css一些注意事项

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)。

相关推荐
小爱同学_9 分钟前
从前端模块化历史到大厂面试题
前端·javascript·面试
雪中何以赠君别9 分钟前
AMD、CMD 和 ES6 Module 的区别与演进
前端·javascript
专注VB编程开发20年19 分钟前
rust语言-对象多级访问
服务器·前端·rust
徐_三岁28 分钟前
关于npm的钩子函数
前端·npm·node.js
代码小学僧29 分钟前
🎉 在 Tailwind 中愉快的使用 Antd Design 色彩
前端·css·react.js
ssshooter33 分钟前
复习 CSS Flex 和 Grid 布局
前端·css·html
_请输入用户名1 小时前
EventEmitter 是广播,Tapable 是流水线:聊聊它们的本质区别
前端·设计模式
爱学习的茄子1 小时前
React Fiber:让大型应用告别卡顿的性能革命
前端·react.js·面试
龙在天1 小时前
我是前端,我来总结一下前端 配 Nginx 的一些案例
前端
Thetimezipsby1 小时前
基于Taro4打造的一款最新版微信小程序、H5的多端开发简单模板
前端·javascript·微信小程序·typescript·html5·taro