对齐透明DIV过在引导轮播背景图像(align transparent div over carou

2019-10-23 09:44发布

我试图将一个透明的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;
}

预期输出:

你可以在看到完整的视图imageur 这里

我只是学习如何做引导定制校准。 任何帮助将是巨大的。

Answer 1:

自定 ,该代码会告诉你如何得到一个透明背景股利,并放置下拉在div。 对所有在传送带上的图像的顶部。
这里是小提琴

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

<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个选项。
这些选项1可以使用自举设置宽度col-md-X
另一种选择,你可以调整类的width:40%; 在CSS。

有一件事你现在需要做的
由于格在图像响应(宽/高),你只需要设置一些媒体断点调整字体大小,你打算把这些div内,并调整每个断点的DIV高度%值的文本。
由于旋转木马响应重新高度和宽度,这就是为什么你需要控制文字的大小和高度的div也。 正如你会看到当你调整窗口的大小。

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

这里是论文的新变化新的小提琴



文章来源: align transparent div over carousel background image in bootstrap