Change background opacity only

Question

I have the following html and CSS:

.title-wrapper { text-align: left; position: absolute; top: 0; left: 0; background-image: linear-gradient( 90deg, rgb(53,65,76) 0%, rgba(53,65,76,0) 100%); opacity: 0.51; display: block; width: 100%; z-index: 5; padding: 12.5px 0 12.5px 12px; } .title { opacity: 1.0; font-size: 1.3em; font-weight: 600; color: white; }

<h1 class="title-wrapper"><span class="title">Example</span></h1>

I want to set the opacity of the title-wrapper background-image to 0.51 but I want to keep the opacity of the text at 1.0. How can I do that?

Right now the text looks really pale. I'm guessing the opacity of the title wrapper is affecting the text.

Why use opacity in title-wrapper and rgb and rgba? Remove the opacity and use rgba for the gradient. jsfiddle.net/j08691/1kgnmn4r — j08691
– j08691, Commented Jan 29, 2016 at 16:45
"background image opacity css" on google => css-tricks.com/snippets/css/transparent-background-images — Bruno SkeptRaiser
– Bruno SkeptRaiser, Commented Jan 29, 2016 at 16:50

smdsgn · Accepted Answer · 2016-01-29 16:45:21Z

You can define your background-image in the :before pseudo class

 .title-wrapper { text-align: left; position: absolute; top: 0; left: 0; display: block; width: 100%; z-index: 5; padding: 12.5px 0 12.5px 12px; } .title-wrapper:before{ content:''; background-image: linear-gradient( 90deg, rgb(53,65,76) 0%, rgba(53,65,76,0) 100%); width:100%; height:100%; position:absolute; top:0; left:0; opacity:0.51; z-index: -1; } .title { font-size: 1.3em; font-weight: 600; color: white; }

<h1 class="title-wrapper"><span class="title">Example</span></h1>

G-Cyrillus · Accepted Answer · 2016-01-29 16:47:27Z

Why don't you use rgba colors all the way ?

 .title-wrapper { text-align: left; position: absolute; top: 0; left: 0; background-image: linear-gradient( 90deg, rgba(53,65,76,0.51) 0%, rgba(53,65,76,0) 100%); /*opacity: 0.51;*/ display: block; width: 100%; z-index: 5; padding: 12.5px 0 12.5px 12px; } .title { opacity: 1.0; font-size: 1.3em; font-weight: 600; color: white; } /* DEMO purpose*/ body { background:url(http://lorempixel.com/600/300/city/1); background-size:cover }

<h1 class="title-wrapper"><span class="title">Example</span></h1>

Collectives™ on Stack Overflow

Change background opacity only

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related