时间戳

首页 > 解决方案 > 通过按钮从引导模式中的图像选择中更改背景图像

html - 通过按钮从引导模式中的图像选择中更改背景图像

问题描述

我创建了一个编辑按钮，它打开一个带有一堆图像的模式，在我选择其中一个图像后，我想通过一个按钮将它设置在背景上。（当您想更改背景https://ibb.co/K0m7Cfq时，类似于 google chrome 主页上的编辑按钮）。但我真的不知道如何修改背景：图片网址。

这是背景的CSS：

.masthead {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 35rem;
    padding: 15rem 0;
    background: linear-gradient(to bottom, rgba(22, 22, 22, .3) 0, rgba(22, 22, 22, .7) 75%, #161616 100%), url(../img/planet_sky.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover
}

这是html：

<header class="masthead">

    <!--Editing button-->
    <div align="right">
        <button type="button" class="btn btn-primary mx-auto" data-toggle="modal" data-target="#changeBackground">
        <span class="glyphicon glyphicon-pencil"></span></button>
    </div>      

        <!-- Modal -->
        <div class="modal fade" id="changeBackground" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">

                    <div class="modal-header text-center">
                        <h4 class="modal-title w-100 font-weight-bold">Select background</h4>

                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <div class="modal-body">

                        <input type="image" src="https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687" height="200" width="230" style="padding-right: 3px;padding-bottom: 3px;"  class="img">

                        <input type="image" src="https://pennyandjohninoz.files.wordpress.com/2011/10/icons-of-australia-3-sydney-opera-house.jpg" height="200" width="230" style="padding-right: 3px;padding-bottom: 3px;"  class="img">

                    </div>

                    <div class="modal-footer d-flex justify-content-center">
                        <button class="btn btn-primary mx-auto">Set background <i class="fas fa-paper-plane-o ml-1"></i></button>
                    </div>

                </div>
            </div>
        </div>

</header>

标签： htmlcssbootstrap-modal

解决方案

我找到了我想要的答案，但我放弃了设置背景按钮：

我在head中创建并添加了这个javascript：

    <script>
    function changeBackground1(imageUrl){
        document.getElementById('backgroundXD').style.backgroundImage = "linear-gradient(to bottom, rgba(22, 22, 22, .3) 0, rgba(22, 22, 22, .7) 75%, #161616 100%), url("+imageUrl+")";
    }
    </script>

我在标头中添加了 backgroundXD id，并在脚本中使用它来更改标头 css 的背景：

<header class="masthead" id="backgroundXD">
...
</header>

我还将 onclick 添加到输入中，只是为了通过单击模态中的首选图像来更改背景图像：

<input onclick="changeBackground1('https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687')"
    type="image" src="https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687" height="150" width="230" style="padding-right: 3px;padding-bottom: 3px;"  class="img">

<input onclick="changeBackground1('https://pennyandjohninoz.files.wordpress.com/2011/10/icons-of-australia-3-sydney-opera-house.jpg')"
    type="image" src="https://pennyandjohninoz.files.wordpress.com/2011/10/icons-of-australia-3-sydney-opera-house.jpg" height="150" width="230" style="padding-right: 3px;padding-bottom: 3px;"  class="img">

推荐阅读