搜索
简帛阁>技术文章>html中背景图片铺满页面没有重复的效果

html中背景图片铺满页面没有重复的效果

刚开始设置背景图片的时候,能铺满页面,但是没有全部把页面展现出来,经过一番查资料,才搞明白。如下:

background: url(../../../assets/login/login-background.jpg) no-repeat center 0px;
background-position: center 0;
background-size: cover;

设置这三个属性就可以达到你想要的效果,其实background属性是包括下面两个属性的,如果background属性里面没有设置的话就加上,设置了话就不用了。

如果图标高度有问题,加上下面这个:

min-height: 100vh;

详解:

url(../../../assets/login/login-background.jpg) —— 图片路径的位置

no-repeat                                                      —— 图片不重复

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

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

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

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

刚开始设置背景图片时候,能铺满页面,但是没有全部把页面展现出来,经过一番查资料,才搞明白。如下:background:url(///assets/login/loginbackgroundjpg)
啥也不说了,大家还是直接看代码吧~<template><divid="logo"></div></template><script>impo
代码:CSS代码复制代码代码如下:img{zindex:1;filter:alpha(opacity85);/*设置透明度,针对IE8以及更早版本。IE9,Firefox,Chrome,Opera
一张清晰漂亮背景图片能给网页加分不少,设计师也经常会给页面背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形
1、html1112、cssjianbian{width:240px;height:25px;margin:50pxauto;border:1pxsolidred;background:url(bar
HTML使背景图片自适应浏览器大小实例详解解决办法:1、图片不够大,又background属性不能拉伸图片;2、只能用个div,把其zindex值设为负,并使这个div大小为整个body大小,在di
文实例讲述了Android编程聊天页面背景图片、标题栏由于键盘引起问题解决方法。分享给大家供大家参考,具体如下:在一个群里面有人问到聊天页面由于键盘弹出来,导致自定义标题栏不见和背景图片都变形
//ifdefAPPPLUS//自建webviewvarcurrentWebviewthis$scope$getAppWebview();varheightthiswindowHeightthisto
源代码(删除了些Class):复制代码代码如下:<table><thead><tr><thcolspan2>买家:易小麦</th></
需求催动此篇博客诞生项目背景之前也没写过小程序但是看过之后都是现成api简单易懂唯一就是会有很多坑要去踩以为要写原生小程序但是是我想多了公司是要节约开发成本那么就衍生了H5嵌入小程序这个操作必须