Как наложить изображение на фон в Twitter Bootstrap Section

Question

У меня есть изображение, которое я хотел бы наложить поверх градиента фона, который я установил для элемента section.И градиент фона, и изображение я устанавливаю в CSS и вызываю через класс в HTML.Первоначально, когда использовался только градиент фона, он работал нормально, но после добавления изображения, чтобы поместить поверх градиента фона, градиент фона исчез?

.banner-gradient {
    background: radial-gradient(circle, #ba000b, #9e0008);
    color: white;
    z-index: 0;
    }

    .banner-overlay {
    background: url("../imagery/image.png");
    max-width: 100%; 
    height: auto;
    background-position: bottom;
    background-repeat: repeat-x;
    z-index: 1;
    }

    .section-align-center {
    text-align: center;
    }

 <section class="banner-gradient banner-overlay section-align-center">
        <div class="container">
            <p>image over background gradient</p>
        </div>
    </section>

Answer 1

Я решил это с помощью этого сообщения .Сначала вы должны поместить banner-gradient во внешнюю div, а затем во внутреннюю div использовать banner-image.

HTML

<section class="banner-gradient section-align-center">
<div class="container banner-overlay">
    <p>image over background gradient</p>
</div>

Answer 2

Я бы лучше отредактировал класс элемента, в котором вы хотите прозрачность, в

<div class="background">
  <div class="transbox">
    <p>This is some text that is placed in the transparent box.</p>
  </div>
</div>


div.background {
    background: url('https://www.w3schools.com/css/klematis.jpg') repeat;
    border: 2px solid black;
}

div.transbox {
    margin: 30px;
    background-color: #ffffff;
    border: 1px solid black;
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
}

div.transbox p {
    margin: 5%;
    font-weight: bold;
    color: #000000;
}

https://jsfiddle.net/mergatroid/xkmyqjec/1/

Answer 3

Попробуйте использовать background-image вместо background для изображения.

.banner-gradient:before {
	content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    background: -webkit-radial-gradient(top center, ellipse cover, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.5) 100%);
}

.banner-overlay {
	background: url('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a') repeat;
}

.section-align-center {
    height: 400px;
    position: relative;
}

<section class="banner-gradient banner-overlay section-align-center">
    <div class="container">
        <p>image over background gradient</p>
    </div>
</section>