【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;
}
相关文章
|
8月前
|
前端开发 容器
3种CSS实现背景图片全屏铺满自适应的方式
3种CSS实现背景图片全屏铺满自适应的方式
722 0
|
9月前
|
数据可视化 前端开发
漏刻有时数据大屏CSS样式表成长教程(2):九宫格图表背景自适应的解决方案
漏刻有时数据大屏CSS样式表成长教程(2):九宫格图表背景自适应的解决方案
90 1
|
9月前
|
前端开发 容器
如何使用 CSS 来控制 img 标签在父元素中自适应宽度或高度,并按比例显示
如何使用 CSS 来控制 img 标签在父元素中自适应宽度或高度,并按比例显示
304 1
|
10月前
|
前端开发 容器
css实现文字大小自适应
css实现文字大小自适应
157 0
|
10月前
|
前端开发
CSS流动布局-页面自适应
CSS流动布局-页面自适应
93 0
|
10月前
|
前端开发 容器
【HTML+CSS】grid自适应网站布局之服务项目展示
【HTML+CSS】grid自适应网站布局之服务项目展示
104 0
|
11月前
|
前端开发
css实现自适应的三栏布局
css实现自适应的三栏布局
65 0
|
前端开发 JavaScript
CSS实战笔记(十一) 自适应三栏布局
CSS实战笔记(十一) 自适应三栏布局
64 0
|
前端开发
CSS实战笔记(十) 自适应双栏布局
CSS实战笔记(十) 自适应双栏布局
58 0