Question

无论如何都要更改内嵌背景图片，因此如果屏幕尺寸下降到767px宽，则背景网址会发生变化。

目前我有以下代码：

<section class="inner-header" style="background:url(/images/sports-glasses.jpg) no-repeat center top;">

我知道我可以为此部分设置一个类或ID并使用CSS代替然后使用@media查询来更改图像但是为了快速我想知道有没有办法在内部更改它？

Answer 1

有一种方法可以使用javascript

更改内联样式

$(window).on('resize', function() {
    if ( $(this).width < 767 ) {
        $('.inner-header').css('background', 'url(/images/other.jpg) no-repeat center top');
    } else {
        $('.inner-header').css('background', 'url(/images/sports-glasses.jpg) no-repeat center top');
    }
});

Answer 2

使用srcset =＆＃34;＆＃34;对响应式内嵌图像有一个新的答案看起来像这样：

<img src="small.jpg"
     srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
     sizes="(min-width: 36em) 33.3vw, 100vw"
     alt="A rad wolf">

请参阅此链接以获取更多信息http://responsiveimages.org/

Answer 3

我找不到在独立文件中使用 CSS 的方法，但这是我的混合内联 CSS 解决方案：

.inner-header {
  height: 300px;
  background-position: top;
  background-size: cover;
}



.responsive-bg {
      background-image: var(--mobile-bg);
  }

  @media (min-width: 1024px) {
      .responsive-bg {
          background-image: var(--desktop-bg);
      }
  }

<section class="inner-header responsive-bg" style="--mobile-bg: url(https://cdn.pixabay.com/photo/2017/07/22/15/21/cat-2528935_1280.jpg); --desktop-bg: url(https://cdn.pixabay.com/photo/2016/01/19/17/54/dog-1149964_1280.jpg)">
  Lorem ipsum
</section>

如何根据屏幕尺寸更改内嵌背景图像？

3 个答案: