文章/答案/技术大牛

发布

社区首页 >问答首页 >用jQuery设置背景图片

问用jQuery设置背景图片
EN

Stack Overflow用户

提问于 2020-01-07 05:17:18

回答 1查看 63关注 0票数 0

我正在使用<picture><source srcset>进行图像响应。一个要求是<picture>中的图像必须设置为背景图像。

我使用jQuery获取图像URL并将其设置为背景图像。然后我删除srcset，这样它们就不再是图像，而是背景图像。

问题:不知何故，URL值没有在'url(myBG)'中显示，而是在检查器中显示了<source media="(min-width: 768px)" style="background-image: url("myBG");">。请看一下我的JS，帮我一把。

谢谢

jsfiddle

$('source').each(function() {
    var myBG = $(this).attr('srcset');
  console.log(myBG);
$(this).css('background-image', 'url(myBG)');
$(this).removeAttr('srcset');
})

HTML

<div>
<picture>
  <source media="(min-width: 768px)" srcset="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
  <source media="(min-width: 414px)" srcset="https://www.w3schools.com/tags/img_white_flower.jpg">
  <img src="https://www.w3schools.com/tags/img_pink_flowers.jpg">
</picture>
</div>

jquery

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-01-07 05:26:11

这是因为您将myBG作为字符串传入。它应该看起来像这样：'url('+myBG+')'

$('source').each(function() {
  var myBG = $(this).attr('srcset');
  console.log(myBG);
  $(this).css('background-image', 'url('+myBG+')');
  $(this).removeAttr('srcset');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <picture>
  <source media="(min-width: 768px)" srcset="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
  <source media="(min-width: 414px)" srcset="https://www.w3schools.com/tags/img_white_flower.jpg">
  <img src="https://www.w3schools.com/tags/img_pink_flowers.jpg">
  </picture>
</div>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59619104

复制

相似问题

问用jQuery设置背景图片
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用jQuery设置背景图片EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用jQuery设置背景图片
EN