当前位置:首页 > html教程 > 正文内容

css实现背景图满屏效果_html5教程,css,背景图

搜教程4年前 (2020-03-14)html教程153

想让整个界面有一个背景图片,自然想到的是在body上加background,代码如下:

body {
     width:100%;
     height: 100%;
    /* 加载背景图 */
    background: url("../static/images/index/backImg.jpg") no-repeat;
    /* 背景图垂直、水平均居中 */
    background-position: center center;
    /* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */
    background-attachment: fixed;
    /* 让背景图基于容器大小伸缩 */
    background-size: cover;
    /* 设置背景颜色,背景图加载过程中会显示背景色 */
  background-color: rgba(41, 50, 39, 1);
}

发现body的高度为0,所以图片不能显示;解决办法是给html设置宽高各100%,这样body就有值了,背景图片完整的充满整个屏幕。

(推荐教程:CSS教程)

扩展知识:

url(images/beijing.png)——图片路径的位置;

no-repeat—— 图片不重复;

center 0px——center是距离页面左边的定位,0px是距离页面上面的定位;

background-position: center 0——就是图片的定位,同上;

background-size: cover;——把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中;

min-height: 100vh;——视窗的高度,“视区”所指为浏览器内部的可视区域大小,即window.innerWidth/ window.innerHeight大小。

相关视频教程推荐:css视频教程

以上就是css实现背景图满屏效果的详细内容,更多请关注ki4网其它相关文章!

扫描二维码推送至手机访问。

版权声明:本文由搜教程网发布,如需转载请注明出处。

本文链接:https://www.sojiaocheng.cn/17376.html

标签: css背景图
分享给朋友:

“css实现背景图满屏效果_html5教程,css,背景图” 的相关文章

网页背景怎样设置为纯黑色css款式【html5教程】,纯黑色css样式,网页背景

网页背景怎样设置为纯黑色css款式【html5教程】,纯黑色css样式,网页背景

本篇文章给人人带来的内容是关于网页背景怎样设置为纯黑色css款式,有肯定的参考价值,有须要的朋侪能够参考一下,愿望对你有所协助。 css背景色彩属性款式单词:background-color 代码简写 background 设置网页背景色彩background-color能够直接运用back...

应用CSS怎样完成笔墨的竖排【html5教程】,CSS,实现文字的竖排

应用CSS怎样完成笔墨的竖排【html5教程】,CSS,实现文字的竖排

本篇文章给人人带来的内容是关于应用CSS怎样完成笔墨的竖排,有肯定的参考价值,有须要的朋侪能够参考一下,愿望对你有所协助。 样式表的笔墨处理属性中有两个主要的属性:writing-mode和text-align。让我们先看看它们的用法: 1. writing-mode(设置对象书写方向)...

css计数器怎样完成自动嵌套编号【html5教程】,css,计数器,自动编号

css计数器怎样完成自动嵌套编号【html5教程】,css,计数器,自动编号

在css中能够运用计数器函数counter()和counters()合营content属性来离别完成给元素自动嵌套编号的结果,下面我们就来看看CSS计数器函数counter()和counters()是怎样自动嵌套编号的。 css计数器运用多个counter()函数嵌套编号 css计数器的...

css怎样完成牢固的背景图象【html5教程】,css固定背景图像

css怎样完成牢固的背景图象【html5教程】,css固定背景图像

所谓牢固背景图象,就是当我们在页面输入任何内容时或许挪动鼠标,背景图象都不会发作更改。css完成背景图象牢固也是异常简朴的,我们能够运用css中的background的相干属性来完成。 引荐参考:《CSS教程》 那末我们在前面的文章中有给人人引见过CSS怎样完成背景图象反复结果。...

css怎样换鼠标款式【html5教程】,css鼠标样式

css怎样换鼠标款式【html5教程】,css鼠标样式

鼠标款式罕见的如箭头或小手外形,除此之外,我们能够依据我们本身的请求,运用css中cursor属性来变动鼠标光标的表面。 引荐进修:《CSS教程》 下面我们就给人人引见鼠标光标的差别款式。 代码以下: <!DOCTYPE> <html> <meta...

CSS的opacity属性该怎样运用【html5教程】,opacity属性

CSS的opacity属性该怎样运用【html5教程】,opacity属性

opacity属性是用来设置元素的不通明度的,它建立在每一个元素上是100%不通明的状况,然则它能够经由过程转变不通明度的值来显现元素它们的通明度,接下来的这篇文章我们就来细致引见CSS中opacity属性的用法。 opacity属性的运用方法 形貌以下 opacity:值; 在值部...