Skip to main content
R
r_tist
Inspiring
May 8, 2017
解決済み

Why does this seem to overlap the content?

  • May 8, 2017
  • 返信数 2.
  • 1422 ビュー

.container-fluid {

     opacity: 0.3;

     background-color: #45abe1;

     z-index: -1;

         }

.container {

background-color: transparent;

margin: 0 auto;

position: relative;

padding:0px!important;

}

What would be a better way to frame this off? My issue is that .container-fluid seems to be overlapping the .container with content/text  I have within.

<div class="container-fluid">

        <div class="container">

            <div class="row">

            <div class="text-center">

      <h2>Heading Text</h2>

              <p>Brief description here.</p>

            </div>

              </div>

The last 2 closing divs come after a series more of what's below within. They have their own content with the correct closing tags surrounding their respective content:

<div class="container-fluid">

    <div class="row">

Wondering if it's the duplicate of the container-fluid for each block that winds up somehow overlapping again & again... causing the teal background with opacity applied to overlay the text/content?

Thank you.

    このトピックへの返信は締め切られました。
    解決に役立った回答 r_tist

    I think this is the issue right here:

    Note: When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read. If you do not want to apply opacity to child elements, use RGBA color values instead (See "More Examples" below).

    I will adjust the hex to rgba...

    返信数 2

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    May 8, 2017

    I can't think of any situation where you need both a container-fluid (full width) and a container.  Which is it?  Do you want full screen width or not?  In fact, I often use one container for the entire document.

    <body class="container" or "container-fluid">

    <div class="row text-center">

          <h2>Heading Text</h2>

          <p>Brief description here.</p>

    </div>

    Nancy

    Nancy O'Shea— Product User & Community Expert
    R
    r_tist作成者
    Inspiring
    May 8, 2017

    Wanted the container fluid for the background color of that div to span screen edge to edge.

    So if I revert back to standard 'container' how will it "know" I need that color coverage in the background, but only the text content within the main centralized area of the page?

    R
    r_tist作成者解決！
    Inspiring
    May 8, 2017

    I think this is the issue right here:

    Note: When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read. If you do not want to apply opacity to child elements, use RGBA color values instead (See "More Examples" below).

    I will adjust the hex to rgba...

    O
    osgood_
    Legend
    May 8, 2017

    Throwing us  a small bit of code is not enough to determine what the problem could be.

    Its not the problem but I dont know why you have z-index declared on a container which is not absolutely or relatively positioned unless you have duplicated the selector elsewhere and set it to absolute or relative.

    .container-fluid {

         opacity: 0.3;

         background-color: #45abe1;

         z-index: -1;

             }

    Most likely the cause of your issue is something else in the page or css. We would need to see that to help.

    契約条件Accessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices