Question

有没有人知道是否可以创建一个功能标题生成器，使用户能够使用颜色，图像和文本自定义它？然后保存并将其添加到他们的网站？

I have created a feature banner demo here to give you an idea of what I'm trying to achieve。（源代码位于本文的底部）

我希望用户能够：

从预定义的下拉列表中更改渐变的颜色
插入自己的文字（显示在渐变顶部
将自己的图片添加到右侧div

有谁知道如何实现这一目标？

非常感谢，

罗斯

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
         font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
         font-weight: 300;
         }
         img {
         display: block;
         }
         h3 {
         font-size:200%
         }
          #container {
         width: 100%;
         height: 150px;
         border-style:solid;
         border-width:1px;
         border-color:#a9a9a9;
         }
         #container > div {
         display: table-cell;
         }
         #left {
         width: 250px;
         vertical-align: middle;
         }
         #middle {
         width: 80%;
         min-width: 400px;
         max-width: 960px;
         color:white;
         text-align:center;
         vertical-align:middle;
         /* fallback */
         background-color: #9b4596;
         /* Safari 4-5, Chrome 1-9 */
         background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#9b4596), to(#6c2787));
         /* Safari 5.1, Chrome 10+ */
         background: -webkit-linear-gradient(top, #9b4596, #6c2787);
         /* Firefox 3.6+ */
         background: -moz-linear-gradient(top, #9b4596, #6c2787);
         /* IE 10 */
         background: -ms-linear-gradient(top, #9b4596, #6c2787);
         /* Opera 11.10+ */
         background: -o-linear-gradient(top, #9b4596, #6c2787);
         }
         #right {
         width: 250px;
         vertical-align: middle;
         }
      </style>
   </head>
   <body>
      <div id="container">
         <div id="left">
            <img src="http://placehold.it/250x150">
         </div>
         <div id="middle">
            <h3>School of Computing</h3>
         </div>
         <div id="right">
            <img src="http://lorempixel.com/output/technics-q-c-250-150-1.jpg">
         </div>
      </div>
   </body>
</html>

Answer 1

我很快就想出了这个，告诉你如何做到这一点。

HTML：

<div id="makeBanner">
    <div id="container">
        <div id="left">
            <img src="http://lorempixel.com/output/technics-q-c-250-150-1.jpg" />
        </div>
        <div id="middle">
             <h3>Space for text here</h3>

        </div>
        <div id="right">
            <img src="http://lorempixel.com/output/technics-q-c-250-150-1.jpg" />
        </div>
    </div>
</div>Image change:
<select id="changeimage">
    <option value="http://lorempixel.com/output/technics-q-c-250-150-1.jpg">Image 1</option>
    <option value="http://www.reflexskis.co.nz/wp-content/uploads/2013/06/demo-1.png">Image 2</option>
</select>
<button id="click">Get HTML</button>
<div class="getHTML"></div>

CSS：

body {
    font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
}
img {
    display: block;
}
h3 {
    font-size:200%
}
#container {
    width: 100%;
    height: 150px;
    border-style:solid;
    border-width:1px;
    border-color:#a9a9a9;
}
#container > div {
    display: table-cell;
}
#left {
    width: 250px;
    vertical-align: middle;
}
#middle {
    width: 80%;
    min-width: 400px;
    max-width: 960px;
    color:white;
    text-align:center;
    vertical-align:middle;
    /* fallback */
    background-color: #9b4596;
    /* Safari 4-5, Chrome 1-9 */
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#9b4596), to(#6c2787));
    /* Safari 5.1, Chrome 10+ */
    background: -webkit-linear-gradient(top, #9b4596, #6c2787);
    /* Firefox 3.6+ */
    background: -moz-linear-gradient(top, #9b4596, #6c2787);
    /* IE 10 */
    background: -ms-linear-gradient(top, #9b4596, #6c2787);
    /* Opera 11.10+ */
    background: -o-linear-gradient(top, #9b4596, #6c2787);
}
#right {
    width: 250px;
    vertical-align: middle;
}
.getHTML {
    width: 60%;
    border: 1px solid;
    margin: 0 auto;
    margin-top: 50px;
}
img {
    width: 250px;
    height: 150px;
}

右键！因此，使用jQuery，我们可以实时更改横幅上的图像（这是我们的横幅预览），然后我们可以单击获取代码并从元素中获取HTML并将其作为文本输出！简单，快速制作你想要的东西。您只需要创建更多选项来更改所需的部分，然后就像点击“获取代码”按钮一样简单。

希望这对您有所帮助，随时提出问题。

DEMO HERE

这是一个版面更好的版本（外观等）。 CSS不是最好的，但如果你愿意，你可以解决所有问题。

BETTER VERSION

创建用户可以自定义的标题/横幅

1 个答案:

HTML：

CSS：