css实现图片全屏铺满自适应的三种方法

前两天做了一个登录页面，登录页面背景是一张图片。图片要铺满整个屏幕，当时再将整个图片铺满时，总是遇到各种问题：①.图片虽然铺满整个屏幕，但是图片变形了；②.图片没有变形，但是图片没有铺满整个屏幕。

background: url("bg.png") no-repeat;
height:100%;---> height:100vh;
width:100%;
overflow: hidden;
background-size:cover;//或者background-size:1

//样式讲解

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

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

00%;

以下有两种方法是在度娘找到，大家可以试试

①

body {
background-image: url(bg.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
}

这里的背景颜色，图片，等可以使用简写

②

margin:0px;
background: url(images/bg.png) no-repeat;
background-size:100% 100%;
background-attachment:fixed;
url(images/beijing.png)——图片路径的位置；

css实现图片全屏铺满自适应的三种方法相关推荐

css背景图片全屏铺满自适应不拉伸
可以使用 CSS 的 background-size 属性来实现全屏铺满背景图片,并且不拉伸.下面是一个例子: body {background-image: url(your-background- ...
css背景图片全屏铺满自适应
background-image: url('images/bg.jpg'); background-size: cover; min-height: 269px; background-positi ...
3种CSS实现背景图片全屏铺满自适应的方式
来源 | https://www.fly63.com/ 一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景 ...
CSS：实现background-image背景图片全屏铺满自适应
body {/* 加载背景图 */background-image: url(images/bg.jpg);/* 背景图垂直.水平均居中 */background-position: center c ...
CSS 实现background-image背景图片全屏铺满自适应
.container {height: 100%;{#background-image: linear-gradient(to top, #fbc2eb, #a6c1ee);#}background- ...
CSS实现background-image背景图片全屏铺满自适应大小【伸手党福利】
.classid {/* 加载背景图 */background-image: url(/static/images/bg.jpg);/* 背景图垂直.水平均居中 */background-positi ...
CSS实现背景图片详解全屏铺满自适应的方式
问题: CSS实现背景图片全屏铺满自适应的方式解决: (1)background-image:可添加多张背景图片.参数:url() || none(默认)background-image: url( ...
利用css 把背景图片全屏铺满
1.html代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
android gridview设置高度,android设置GridView高度自适应，实现全屏铺满效果
使GridView每个item的高度自适应拉伸,达到整个GridView刚好铺满全屏的效果. public static void setGridViewMatchParent(GridView gr ...

css实现图片全屏铺满自适应的三种方法

css实现图片全屏铺满自适应的三种方法相关推荐

最新文章

热门文章