Как добавить текст в фоновое изображение в Bootstrap? - PullRequest
Новая
       45

Как добавить текст в фоновое изображение в Bootstrap?

0 голосов
/ 04 июля 2018

Я разрабатываю форму Bootstrap. Я хотел добавить текст в фоновое изображение так: http://dubaiexporters.com/member_benefits.aspx. Я попробовал приведенный ниже код, но текст не очень хорошо вписывается в фоновое изображение.

enter image description here

Я новичок в Bootstrap.

Код: 

<div class="container">
 <div class="silverAds">
                        <div class="adContent">
                            <ul><li><a href="pdf/Dubai_Exporters_Member_Certficate.pdf" target="_blank">DubaiExporters Membership Certificate </a></li> 
                                <li>Log in to access and edit the Company profile. </li>
                                <li>Access to the latest inquiries received from agents, importers, distributors all
                                    over the world.</li>
                                <li>Company’s Logo , profile & the website link in the Supplier’s section.</li>
                                <li>Advertisement of the Company shall be included in the Listing.</li>
                                <li>Weekly Newsletter updates from Dubai Exporters containing latest news about the
                                    world economy, export scenarios, upcoming projects, trade events, market reviews
                                    and the link to the Member’s Profile on Dubai Exporters, shall be mailed to our
                                    entire database of over 150000 Importers from Africa, CIS,Eastern Europe, latin
                                    America, Asia.&nbsp;<a class="lightbox" href="images/newslettertemplate.jpg">View sample</a></li>
                                <li>A CD of Dubai Exporters shall be distributed to all the trade visitors and importers
                                    visiting Int’l trade exhibitions where Dubai Exporters participates, thereby making
                                    your company’s information reach the right target audience. </li>
                            </ul>
                            <div style="float: right; padding:15px 60px 0px 0px;">
                                <asp:ImageButton ID="btSilver" runat="server" ImageUrl="images/mem_btn.png"
                                     /></div>
                        </div>
                    </div>
</div>

CSS: 

 .silverAds
{


    background: url(  'images/SILVER-member.jpg' ) no-repeat center 0;
    height: 372px;
    width: 50%;
    margin: 0px 0px 20px 0px;
    width:100%;
}

 .adContent
{
    padding:80px 80px 0px 65px;
    width:87%;
}

div.adContent li
{

    font-family :Arial;
    font-size: 12px;
    list-style-image: none;
    color:#FFFFFF;
    line-height:16px;

}
div.adContent li a{color:#FFFFFF; text-decoration:underline;}

1 Ответ

0 голосов
/ 04 июля 2018

Используйте background-size: 100% 100%; и height: 100%;

См. Скрипку: https://jsfiddle.net/5shda4pc/2/ 

 .silverAds
{
    background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
    height: 100%;
    margin: 0px 0px 20px 0px;
    width:100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

 .adContent
{
    padding:80px 80px 0px 65px;
    width:87%;
}

div.adContent li
{

    font-family :Arial;
    font-size: 12px;
    list-style-image: none;
    color:#FFFFFF;
    line-height:16px;

}
div.adContent li a{color:#FFFFFF; text-decoration:underline;}
<div class="container">
 <div class="silverAds">
    <div class="adContent">
      <ul><li><a href="pdf/Dubai_Exporters_Member_Certficate.pdf" target="_blank">DubaiExporters Membership Certificate </a></li> 
        <li>Log in to access and edit the Company profile. </li>
        <li>Access to the latest inquiries received from agents, importers, distributors all
                                    over the world.</li>
        <li>Company’s Logo , profile & the website link in the Supplier’s section.</li>
        <li>Advertisement of the Company shall be included in the Listing.</li>
        <li>Weekly Newsletter updates from Dubai Exporters containing latest news about the
                                    world economy, export scenarios, upcoming projects, trade events, market reviews
                                    and the link to the Member’s Profile on Dubai Exporters, shall be mailed to our
                                    entire database of over 150000 Importers from Africa, CIS,Eastern Europe, latin
                                    America, Asia.&nbsp;<a class="lightbox" href="images/newslettertemplate.jpg">View sample</a></li>
         <li>A CD of Dubai Exporters shall be distributed to all the trade visitors and importers
                                    visiting Int’l trade exhibitions where Dubai Exporters participates, thereby making
                                    your company’s information reach the right target audience. </li>
                            </ul>
                            <div style="float: right; padding:15px 60px 0px 0px;">
                                <asp:ImageButton ID="btSilver" runat="server" ImageUrl="images/mem_btn.png"
                                     /></div>
                        </div>
                    </div>
</div>
...