背景图片如何自适应屏幕

2024-05-11 06:33:21

自己比较头疼的问题，网上搜了好多资料，大概整理了一下

1. 直接设置CSS样式达到目的

.bg{background-image: url(../images/1.jpg);//此为图片地址background-size: 100% 100%;-moz-background-size: 100% 100%;-webkit-background-size: 100% 100%;
}

在以上代码中，background-size: cover；是对背景图进行等比例拉伸，仍然存在图片显示不完全的问题。

background-size: 100% 100%；是对背景图的宽拉伸至屏幕宽度，高拉伸为屏幕高度，即非等比例拉伸。

该方法虽然较为简单，但存在问题：对图片进行拉伸成都较大时会使图片失真。

2. 利用 css @media

@media only screen and (min-width: 1024px){ //当分辨率width >= 1024px 时使用1.jpg作为背景图片

.bg{

background:url(../images/1.jpg) no-repeat;

}

}

@media only screen and (min-width: 400px) and (max-width: 1024px){ //当分辨率400px < width < 1024px 时使用2.jpg作为背景图片

.bg{

background:url(../images/2.jpg) no-repeat;

}

}

@media only screen and (mmax-width: 400px) { //当分辨率width =< 400px 时使用3.jpg作为背景图片

.bg{

background:url(../images/3.jpg) no-repeat;

}

}

通过获取当前屏幕的分辨率，选择不同分辨率对应的样式。

可以简单理解为：提前做好几张不同尺寸的背景图片，在一定分辨率范围内使用某一尺寸的图片。

背景图片如何自适应屏幕相关推荐

html设置背景图片高度自适应屏幕,CSS设置背景图宽度100%，高度自适应
div的高度随背景图片的高度变化: 原理是通过padding-top或者padding-bottom实现,值是背景图片的宽高比.高度设置为0..newcenter{ width: 100 ...
HTML中的图片如何自适应屏幕？这篇文章有图片的自适应用法介绍
首先我们看看HTML中的图片是如何自适应屏幕的: 让图片自适应屏幕大小最简单的方法,保证管用,你把那个图片写在div里面的背景里,也就是background:url(../img/1.jpg) cen ...
设置背景图片的两种方式，并解决手机端背景图片高度自适应问题
设置背景图片的两种方式,并解决手机端背景图片高度自适应问题参考文章: (1)设置背景图片的两种方式,并解决手机端背景图片高度自适应问题 (2)https://www.cnblogs.com/Dark ...
CSS中Body背景图片的自适应
CSS中Body背景图片的自适应 html{height:100%; } body{background:url(../image/bg-m.jpg) no-repeat;background-siz ...
CSS样式背景图片的自适应
今天在写一个页面的时候,需要用到一个背景图片. 于是我把背景图片放到static(静态文件夹)里面,于是在css样式中引入,但是背景图片又太大,最后的样式就是比例失调.但是由于太久没有用到这个属性了, ...
html背景自动适应,css背景图片如何自适应？
css可以使用background-size属性设置背景图片自适应,为背景图片设置background-size:cover;样式即可使背景图片自适应. css可以使用background-size属 ...
如何在div中设置背景图片并且自适应div大小
参考如下代码,设置背景图片的大小为100% 100%并且设置no-repeat 这样图片就能在div改变的情况下,仍然显示完全 <!DOCTYPE html> <html>&l ...
html+CSS让背景图片充满整个屏幕
由于给网页设置背景图时,需要设置背景图不重复且充满整个浏览器屏幕. 给body标签指定背景图,这样背景图就可以填充整个浏览器viewport了. 其实,该方案对所有的块级容器都可以生效.块级容器的宽高 ...
web图片铺满网页_CSS中如何设拉伸背景图片铺满屏幕
展开全部给body标签指定背景图,这样背景图就可e69da5e887aa62616964757a686964616f31333365653163以填充整个浏览器viewport了.其实,该方案对所有 ...

最新文章

热门文章