根据选择显示不同的身体背景图像 [英] Show different body background IMAGE based on selection

问题描述

我不确定是否可以，但是我希望如果您在选择菜单中选择一个选项，背景会在页面上改变

I'm not sure if this is possible, but I want that if you select a option in the select menu, that the background will change on the page

还可以通过动画中的平滑淡出淡入淡出吗?

Can it also be done with a smooth fade out fade in animation?

codepen

    body {
        background-image: url("http://www.manners.nl/wp-content/uploads/2014/08/Manners-stijlvolste-steden-londen-6.jpg");
        background-attachment: fixed;
        background-position: 50% 50%;
        background-size: cover;
    }

    <div class="container">
      
      <br><br><br>
      <select class="form-control select">
        <option> Show London Background Picture</option>
        <option> Show Paris Background Picture</option>
        <option> Show Italy Background Picture</option>
      
      </select>
      
      
      <br>
      <div class="jumbotron">
    IF LONDON SELECTED THEN BACKGROUND: <br>http://www.manners.nl/wp-content/uploads/2014/08/Manners-stijlvolste-steden-londen-6.jpg<br><br>
    IF PARIS SELECTED THEN BACKGROUND: <br>    
    http://travelnoire.com/wp-content/uploads/2013/12/eiffel-tower-paris-2.jpg<br><br>
    IF ITALY SELECTED THEN BACKGROUND: <br>
        https://upload.wikimedia.org/wikipedia/commons/5/53/Colosseum_in_Rome,_Italy_-_April_2007.jpg</div>
    </div>

推荐答案

您可以将函数应用于select元素的onchange-event，该函数会更改网站的背景图片:

You can apply an function to the onchange-event of your select-element which changes the background-image of your site:

$('#ID_OF_YOUR_SELECT').change(function() {
    $('body').css('background-image', 'url("' + this.value + '")');
});

这是根据您的示例更新的代码笔: http://codepen.io/anon/pen/yNvapW

Here is an updated codepen based on your example: http://codepen.io/anon/pen/yNvapW

这篇关于根据选择显示不同的身体背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！