1

I have the following issue.

This is my html code:

<div className="search_artist ">
    <p className="search_artist__heading">Find a band/artist</p>
    <div className="form-group">
        <input type="text" class="form-control" id="usr"/><button className="btn"onClick={this.searchArtists}>Search</button>
    </div>
</div>

This is my SCSS:

.search_artist {
    margin: 44px auto;
    width: 908px;
    border-radius: 10px;
    opacity: 0.15;
    position: relative;
}

.search_artist > * {
    position: relative;
    z-index: 100;
}

.search_artist__heading {
    text-align: left;
    font-size: 2rem;
    color: white;
}

Im trying to put all children elements under search_artist to be on top of the div so that the opacity doesn't affect them.

Can I please get any input as to where I'm going wrong?

2 Answers 2

3

https://www.w3schools.com/cssref/css3_pr_opacity.asp

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).

opacity applies to all the child elements. It doesn't matter if elements are "on top of the div" as you state (and I believe you're trying to achieve this through z-index but these are all still children of the parent, so the z-index doesn't matter). If you just want the background color to be opaque, then you can see a RGB background color instead with transparency, rather than the opacity attribute. Does this answer your question?

1
  • That was it! Thank you. Ill have to read through it more thoroughly! Feb 27, 2018 at 0:11
2

The opacity property is inherited by all child element of a parent. I suppose you need opacity for a background and you tried using opacity property. You can try using a background color with alpha (opacity). Example:

parent{
    background:rgba(0,0,0,.3)
}

First 3 values are normal rgb values, last one is alpha (opacity) with values 0 to 1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.