css新手教程之背景图充满整个屏幕
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
想让整个界面有一个背景图片,自然想到的是在body上加background,代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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就有值了,背景图片完整的充满整个屏幕。
扩展
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 中background 设置文本框背景图 的方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-22
- 使用 css3 transform 属性可以轻易的旋转,倾斜,缩放任何元素。接下来通过本文给大家分享使用 css3 transform 属性来变换背景图的方法,感兴趣的的朋友一起看看吧2019-05-07
- 这篇文章提供了一个很好的解决方法,当您确实想要旋转背景图像时,或者在容器元素旋转时保持背景图像不变。对CSS3 transforms应用于背景图像的实现方法感兴趣的朋友跟随小2019-04-16
通过css使用background-color为背景图添加遮罩效果的两种方法
这篇文章主要介绍了通过css使用background-color为背景图添加遮罩效果的两种方法,需要的朋友可以参考下2018-07-12- 这篇文章主要介绍了纯css实现背景图片半透明内容不透明的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-03-12
- 这篇文章主要介绍了css设置body背景图片满屏的实例代码,需要的朋友可以参考下2018-02-26
- 这篇文章主要介绍了CSS实现网页背景图片自适应全屏的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-02-07
- 这是一款基于css3实现的iPhone X手机桌面背景图片切换效果源码。底部排列着各个图片的缩略图,上方是iPhone X手机界面,手机中可看到背景图的清晰照片效果。点击下方的缩略2017-11-30
- 这是一个CSS3鼠标hover背景图片缩放动画效果。在鼠标hover背景图片时,可实现背景图片平滑放大离开及恢复的效果2017-09-13
css3实现一个div设置多张背景图片及background-image属性实例演示
这篇文章主要介绍了css3实现一个div设置多张背景图片及background-image属性,同时对于css3背景渐变也做了详细的解释,水平渐变,左上角渐变等等方式,需要的朋友可以参考下2017-08-10
最新评论