AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

CSS背景图片自适应大小

2023-07-21 157
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： CSS背景图片自适应大小 
/*数据指标装饰框*/
.rim {
    position: relative;
    background: url("../images/boder.png");
    background-size: 100% 100%;
    padding: 10px;
    margin-bottom: 15px;
    z-index: 10;
}


Done！

文章标签：
前端开发
关键词：
CSS自适应
CSS背景图片
CSS背景图片自适应
漏刻有时
目录
相关文章
夏天49597
|
前端开发 UED 容器
CSS基础-背景属性：颜色、图片、重复
【6月更文挑战第9天】本文介绍了CSS背景属性，包括背景颜色、图片、重复的使用和常见问题。通过实例展示了如何设置背景颜色（如使用rgba()注意透明度影响）、背景图片（使用background-size控制缩放）、背景重复（避免默认平铺导致混乱）以及综合使用背景属性创建复杂效果。理解并熟练运用这些属性能提升网页设计的视觉层次和用户体验。建议通过实践不断探索和提升CSS技能。
夏天49597
218 4
你都不懂
|
11月前
|
前端开发 JavaScript 容器
CSS 实战录: 双栏、四等分、不等间距、自适应...
CSS 实战录: 双栏、四等分、不等间距、自适应...
你都不懂
225 0
我是快乐的嘟嘟
|
10月前
|
前端开发
css页面顶部底部固定，中间自适应几种方法
【10月更文挑战第22天】css页面顶部底部固定，中间自适应几种方法
我是快乐的嘟嘟
945 58
我是快乐的嘟嘟
|
10月前
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么？
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时，需要对其基本原理和特性有深入的理解，同时结合具体的布局需求和场景，进行细致的调整和优化。通过合理的设置和注意事项的把握，才能实现理想的自适应效果，提升用户体验。还可以根据实际情况进行更深入的探索和实践，以不断提升 Flex 布局的应用能力。
我是快乐的嘟嘟
471 34
邹荣乐
|
11月前
|
前端开发
运用CSS伪类与属性，巧妙实现背景图片旋转效果
运用CSS伪类与属性，巧妙实现背景图片旋转效果
邹荣乐
201 0
朝阳39
|
前端开发 容器
css 动态文本对齐自适应 — 文本宽度小于容器宽度时居中对齐，文本宽度大于容器宽度时居左对齐
css 动态文本对齐自适应 — 文本宽度小于容器宽度时居中对齐，文本宽度大于容器宽度时居左对齐
朝阳39
120 2
秋刀鱼不做梦
|
前端开发 容器
CSS3 新增背景属性 + 新增边框属性（如果想知道CSS3新增背景属性和新增边框属性的知识点，那么只看这一篇就够了！）
CSS3 新增背景属性 + 新增边框属性（如果想知道CSS3新增背景属性和新增边框属性的知识点，那么只看这一篇就够了！）
秋刀鱼不做梦
160 6
八百标兵奔北坡
|
前端开发 容器
CSS实现三列布局（左右固定宽度，中间自适应）
CSS实现三列布局（左右固定宽度，中间自适应）
八百标兵奔北坡
516 3
sky_qiyi
|
Web App开发 移动开发 前端开发
Web网页制作-知识点（3）——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点（3）——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
sky_qiyi
148 1
sky_qiyi
|
移动开发 前端开发 HTML5
Web网页制作-知识点（3）——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
Web网页制作-知识点（3）——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
sky_qiyi
168 1