一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动。
因此,今天我们将与你分享3种CSS实现背景图图片全屏铺满自适应的方式,希望对你有所帮助。
margin:0px;
background: url(images/bg.png) no-repeat;
background-size:100% 100%;
background-attachment:fixed;
url(images/beijing.png)——图片路径的位置;
no-repeat—— 图片不重复;
center 0px——center是距离页面左边的定位,0px是距离页面上面的定位;
background-position: center 0——就是图片的定位,同上;
background-size: cover;——把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中;
min-height: 100vh;——视窗的高度,“视区”所指为浏览器内部的可视区域大小,即window.innerWidth/ window.innerHeight大小。
background: url("bg.png") no-repeat;
height:100%;
width:100%;
overflow: hidden;
background-size:cover;//或者background-size:100%;
给body标签指定背景图,这样背景图就可以填充整个浏览器viewport了。其实,该方案对所有的块级容器都可以生效。块级容器的宽高是动态的,那么背景图将自动伸缩,充满整个容器。
css body标签的样式如下:
body {
/* 加载背景图 */
background-image: url(images/bg.jpg);
/* 背景图垂直、水平均居中 */
background-position: center center;
/* 背景图不平铺 */
background-repeat: no-repeat;
/* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */
background-attachment: fixed;
/* 让背景图基于容器大小伸缩 */
background-size: cover;
/* 设置背景颜色,背景图加载过程中会显示背景色 */
background-color: #464646;
}
到此这篇关于CSS实现背景图片全屏铺满自适应的3种方式的文章就介绍到这了,更多相关CSS背景全屏铺满自适应内容请搜索仿站网www.ecmsw.cn以前的文章或继续浏览下面的相关文章,希望大家以后多多支持仿站网www.ecmsw.cn!
仿站是指参照原先的网站的制作一个和原来的网站一样的,包括他的框架及内部的一些数据以及原先网站的功能都可以一 一仿出来。仿出来的网站也...
为什么制作网站地图?上次仿站网和大家说了什么是网站地图,今天我们来讲讲一个网站为什么制作网站地图呢?众所周知,网站地图要包括您的主要网...
我们经常看到有些网站PC和手机访问的时候显示不同的页面,而且网址是一样的,右击查看源代码也是一样的,这就属于响应式自适应的网站,那么仿制自适...
怎么仿站应该是每一个希望学习仿站的人都必须要了解的。如果不在仿站之前了解一下,仿站可能不成功,或者仿出来的网站没有真正的意义。下面仿...
cms系统已经成为建站的首选,因为现有的cms非常多,用户数量也很多。cms入门很快,加上cms本身提供的模版也超多,因此建一个站不超过10分钟。在众多...
模板加密的不能仿,有一些模板会把一些参数写到JS里面,然后通过复杂的JS控制一些特效和布局这种大部分都有相关的验证,及时本地能运行,但发布到网...