Css - css 基本技巧
css 样式常用技巧汇总
背景渐变设置
background-color: linear-gradient(#04204D, #075AA3);
背景图片铺满页面
background: url("your-background-image.jpg") no-repeat center center fixed;
background-size: cover;
同时设置多个背景图片及渐变色, 渐变色设置在最后,最后在图层中最低。
- 设置背景图片及渐变色
.multi-bg-example {
width: 100%;
height: 400px;
background-image: url(firefox.png), url(bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: bottom right, left, right;
}
- 同时设置三个背景图片
.multi-bg-example {
background: transparent;
background-image: url('@/assets/leftTop-decoration.png'),
url('@/assets/rightTop-decoration.png'), url('@/assets/rightBottom-decoration.png');
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: left top, right top, right bottom;
padding: 10px;
box-shadow: none;
}
控制元素透明度
- 通过opacity: 0.25 (改变当前元素以及子元素)
- 通过设置元素背景色RGBA,background: rgba(255,0,0,0.25) (只改变当前元素的透明度,不影响子元素)
css实现一个气泡图
<div class="popup" position="bottom"></div>
.popup {
min-width: 100px;
min-height: 30px;
line-height: 30px;
background: #93ec69;
padding: 0 10px;
border-radius: 4px;
margin: 10px;
display: inline-block;
position: relative;
}
.popup:before {
content: '';
width: 15px;
height: 15px;
background: #071833;
border: 1px solid #0065bd;
display: block;
position: absolute;
}
.popup[position='bottom']:before {
top: 100%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
border-left: none;
border-top: none;
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战