Question

原始模板仅使用固定图像，并使其响应于不同的屏幕分辨率：

   <div class="bg-img" style="background-image: url('./img/background1.jpg');">
   <div class="overlay"></div>
   </div>

现在，我添加了一个随机图像，并尝试使响应式的类/样式在这里起作用，但事实并非如此。

   <header id="home">

   <div class="bg-img" style="background-image">
   <div id="banner-load"></div>

<script type='text/javascript'
   src='https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js'> 
   </script>

   <script>
   var images = ['background11.jpg', 'background12.jpg', 'background13.jpg', 
   'background14.jpg', 
   'background15.jpg'];

    $('<img class="fade-in, bg-img" style="background-image" src="img/' + 
    images[Math.floor(Math.random() * images.length)] + '">').appendTo('#banner- 
    load');
    </script>

    <div class="overlay"></div>
    </div>

我在做什么错？可能是class =“ bg-img” style =“ background-image”无法识别随机图像？如果是这样，如何解决？

更新

我正在尝试其他方法，使用div作为背景获取原始代码，并使其可编程：

$("<div class='bg-img' style="background-image: url('img/" + images[Math.floor(Math.random() * images.length)] + ");'>")

但我仍然无法使其正常工作。出问题了，我得到一个错误

->参数列表后未捕获到的SyntaxError：缺少

Answer 1

IOrganizationService service; //initialize this

QueryByAttribute query = new QueryByAttribute();
query.ColumnSet = new ColumnSet("name");
query.Attributes.AddRange("name");
query.Values.AddRange("test account"); 

Entity accountEntity = service.RetrieveMultiple(query).Entities.FirstOrDefault(); 

if (accountEntity != null) 
{
    Guid accountID = accountEntity.Id;
    service.Delete("account", accountID);
}

通常我会使用img而不是div来显示图像。我必须为div设置宽度和高度，因为其中没有任何内容。可以是100px之类的像素，也可以是自适应的-我用了100％（用于填充当前视图）。

我使用background-size：cover来使图像填充div，无论大小如何。

Answer 2

使用此：

$('.bg-image').css('backgroundImage', 'img/' + images[Math.floor(Math.random() * images.length)]);

代替

$('<img class="fade-in, bg-img" style="background-image" src="img/' + 
images[Math.floor(Math.random() * images.length)] + '">').appendTo('#banner- 
load');

HTML响应式CSS不适用于随机图像

更新

2 个答案: