在引导程序中将透明 div 对齐到轮播背景图像上

Question

我正在尝试在背景图像上放置一个透明 div。在这个透明的 div 上有一个蓝色的 div，它有下拉列表和右对齐的图标和一些标题。已经一天了，我尝试了不同的方法来实现这一点，通过将背景图像提供给容器，使用jumbotron，终于尝试carousel，我现在想对齐内容，

目前的样子：

我的页面：

<div class="container">

// some code for nav bar and logo etc       

<div id="myCarousel" class="carousel slide" data-ride="carousel">

    <div class="carousel-inner">
        <div class="item active">
            <img src="~/img/backimage.jpg" alt="Chania">
            <div class="container">
                <div class="carousel-caption">
                    <div class="row" id="ddselect">
                        <div class="col-md-6">
                            <select name="connames">
                                <option value="America">America</option>
                                <option value="UK">UK</option>
                                <option value="China">China</option>
                                <option value="India">India</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>    

    </div>    
</div>



<div>

自定义 CSS：

.carousel .carousel-inner .item .container .carousel-caption #ddselect, .carousel .carousel-inner .item .container .carousel-caption  #ddselect{  
 background-color:#fff;  
 opacity: 0.7;  
 border: 2px solid;  
    border-radius: 5px;  
    padding-right: 800px;

padding-bottom: 250px;
}

预期输出：

你可以在imageurhere看到完整的视图

我只是在学习如何在引导程序中进行自定义对齐。任何帮助都会很棒。

Answer 1

stom，该代码将展示如何获取具有透明背景的 div 并将下拉菜单放置在 div 中。全部在轮播中的图像顶部。
这是Fiddle。

我认为这就是你想要做的。

<div class="item active">
        <img src="http://img1.goodfon.su/original/1920x1080/b/b3/soty-pchela-med-fon-nasekomoe.jpg"  alt="First slide image">
        <div class="col-md-6 v-center borders">
            <div>
                <select name="connames" class="bg-select">
                    <option value="America">America</option>
                    <option value="UK">UK</option>
                    <option value="China">China</option>
                    <option value="India">India</option>
                </select>
            </div>
            <h3>Some Text Here</h3>
            <p>ASome more text here.</p>
        </div>
    </div>

已添加到此帖子中
做你提到的其他这些事情。
我在代码中添加的内容是为了向您展示如何重新定位透明 div、使下拉菜单成为透明背景颜色、让 div 高度响应等。
所有背景颜色选项都是透明的。
我展示了 2 个选项，用于在图像上重新定位 div。
其中 1 个选项可以使用 Bootstrap col-md-X 设置宽度。
另一个选项您可以在 css 中调整类 width:40%;。

您现在需要做的一件事。
因为图像上的 div 是响应式的（宽度/高度），您只需要设置一些媒体断点来调整您计划放入这些 div 中的文本的字体大小，并在每个断点调整 div 高度的 % 值。
因为轮播对高度和宽度都有响应，这就是为什么您也需要控制文本大小和 div 高度的原因。正如您在调整窗口大小时所看到的那样。

这应该会给你一个很好的起点。

Here is the new Fiddle with theses new changes.