在Bootstrap模式中使特定的div背景透明

Question

This is my HTML (Bootstrap) document:

<div modal="showModal" close="cancel()">
    <div class="modal-header text-center">
        <h2>Members who shortlisted you </h2>
    </div>
    <div class="modal-body">
        <img src="kitty.jpg"/>
    </div>
    <div class="modal-footer">
      <button class="btn btn-success" ng-click="ok()">Okay</button>
      <button class="btn" ng-click="cancel()">Cancel</button>
    </div>
</div>

I want to make the background of the modal-header part transparent so that I can see the text and images behind the popup. I already tried the following CSS:

.modal-header {
    background-color: #000000;
}

but its not working, if someone would help me then it great

Answer 1

background-color: #000000; is not transparent.

Try either background-color:transparent (which would be the default).

Alternatively :background-color:rgba(0,0,0,0) .

You should note however that this will only show the background of the parent div....whatever that is.

Answer 2

background-color: #000000 does not make the background transparent, it only sets the background-color to black .

You can use one of 3 things:

background-color: transparent - Sets the background color to transparent

background-color: rgba(0, 0, 0, 0) - The last 0 sets opacity to 0

opacity: 0 - This sets the opacity of the whole div to 0