text 使背景图像适应CSS中的屏幕分辨率

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了text 使背景图像适应CSS中的屏幕分辨率相关的知识,希望对你有一定的参考价值。

@media (max-width: 320px) {
            body {
              background-image: url('images/background_320.jpg'); opacity: 0.5;             
              background-repeat:no-repeat;
            }
          }
          @media (min-width: 321px) and (max-width: 1023px) {
            body {
              background-image: url('images/background_1024.jpg');  opacity: 0.5;             
              background-repeat:no-repeat;
            }
          }
          @media (min-width: 1024px) and (max-width: 1279px) {
            body {
              background-image: url('images/background_1024.jpg');              
              background-repeat:no-repeat;
            }
          }
          @media (min-width: 1280px) and (max-width: 1365px) {
            body {
              background-image: url('images/background_1280.jpg');  opacity: 0.5;             
              background-repeat:no-repeat;
            }
          }
          @media (min-width: 1366px) {
            body {
              background-image: url('images/background_1920.jpg'); opacity: 0.5;              
              background-repeat:no-repeat;
            }
          }

以上是关于text 使背景图像适应CSS中的屏幕分辨率的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 CSS 拉伸图像以适应屏幕并保持纵横比?

css 如何固定网页背景,并且自动适应浏览器大小!

CSS使图像调整大小并适合任何屏幕

根据屏幕分辨率显示自定义背景图像

使用@media screen实现网页适应不同的分辨率

如何使背景图像适合所有屏幕尺寸?