【CSS】background-image背景图片全屏铺满自适应

简介: 【CSS】background-image背景图片全屏铺满自适应

【CSS】background-image背景图片全屏铺满自适应

.box{
    /* 加载背景图 */
    background-image: url(images/bg.jpg);
    /* 背景图垂直、水平均居中 */
    background-position: center center;
    /* 背景图不平铺 */
    background-repeat: no-repeat;
    /* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */
    background-attachment: fixed;
    /* 让背景图基于容器大小伸缩 */
    background-size: cover;
    /* 设置背景颜色,背景图加载过程中会显示背景色 */
    background-color: #464646;
}

让背景图片偏移位置

.box{
    background-position: right 10% center;
}
相关文章
|
11月前
|
前端开发 JavaScript 容器
CSS 实战录: 双栏、四等分、不等间距、自适应...
CSS 实战录: 双栏、四等分、不等间距、自适应...
225 0
|
10月前
|
前端开发
css页面顶部底部固定,中间自适应几种方法
【10月更文挑战第22天】css页面顶部底部固定,中间自适应几种方法
|
10月前
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么?
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时,需要对其基本原理和特性有深入的理解,同时结合具体的布局需求和场景,进行细致的调整和优化。通过合理的设置和注意事项的把握,才能实现理想的自适应效果,提升用户体验。还可以根据实际情况进行更深入的探索和实践,以不断提升 Flex 布局的应用能力。
|
11月前
|
前端开发
运用CSS伪类与属性,巧妙实现背景图片旋转效果
运用CSS伪类与属性,巧妙实现背景图片旋转效果
201 0
|
前端开发 容器
css 动态文本对齐自适应 — 文本宽度小于容器宽度时居中对齐,文本宽度大于容器宽度时居左对齐
css 动态文本对齐自适应 — 文本宽度小于容器宽度时居中对齐,文本宽度大于容器宽度时居左对齐
120 2
|
前端开发 容器
CSS【详解】对齐 (含文本垂直对齐,文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐,图片和文本对齐等)
CSS【详解】对齐 (含文本垂直对齐,文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐,图片和文本对齐等)
636 0
|
前端开发 容器
CSS背景图片定位
原文:CSS背景图片定位 在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽。 对背景图片的定位就需要用到CSS中的background样式,如: div{ background-image: url("1234.
1687 0
|
3月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
|
3月前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。