Question

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

当前外观： enter image description here

我的页面：

<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;
}

预期产出：

您可以在imageur here

中看到完整视图

我正在学习如何在bootstrap中进行自定义对齐。任何帮助都会很棒。

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高度响应等。
所有背景颜色选项都是透明的我展示了两种方法来重新定位div在图像上的位置您可以使用Bootstrap col-md-X设置其中一个选项另一个选项是您可以调整css中的类width:40%;。

您现在需要做的一件事 因为图像上的div是响应的（宽度/高度），您只需设置一些介质断点来调整您计划放入这些div中的文本的字体大小，并调整每个断点处div高度的％值。
因为旋转木马对高度和宽度都有响应，所以这也是你需要控制文本大小和div高度的原因。正如您在调整窗口大小时所看到的那样。

这应该从这里给你一个非常好的起点。

Here is the new Fiddle with theses new changes.

transparent div over carousel image

在bootstrap中对准透明div在旋转木马背景图像

1 个答案: