How to change element's Opacity / Transparency and keep body background-image still visible?
Question
I m new at coding and first question to ask here.
This is first time that I was unable to find an answer online, maybe because I am unable to explain/describe it well. But here I am able to post a picture.
Exactly what I want do make. This dark shade background of an element but to keep body background still visible
Can you please help me how can I do this in CSS?
Many thanks!
4 answers
solution1
2 ACCPTED 2017-01-04 16:54:41
You can set background for the element: background-color: rgba(0,0,0,0.5); Pay attention at 0.5. It run from 0 to 1. More high more dark.
solution2
2 2017-01-04 17:03:18
- create a div with position absolute
- set it's background-color as black
- set it's opacity as 0.5(adjust opacity as you required,which determine your transparency level).
html{ width:100%,height:100%; } body{ background-image: url(https://i.stack.imgur.com/wwy2w.jpg); height:100%; width:100%; background-size:cover; } #black-box{ position:absolute; background-color:black; opacity:0.5; width:50%; top:10%; left:10%; height:50%; }
<body> <div id="black-box"></div> </body>
solution3
1 2017-01-04 17:05:58
You need a div for the background image, which I have added, you then need another div in order to vertical align the content, similar to your example and finally a third div that will hold the content.
HTML:
<div class="background">
<div class="background-module">
<div class="background-info">
<h1>Hello</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non imperdiet enim. Aenean eget dolor in risus aliquam pellentesque. Ut porta nec ex vel tincidunt. Maecenas varius accumsan posuere. Donec non blandit ipsum. Duis vel eros nunc. Donec aliquam ac ipsum et ultrices.</p>
<form>
<input type="email" />
<button type="submit">Submit</button>
</form>
</div>
</div>
</div>
CSS:
.background {
background:url("https://9to5mac.files.wordpress.com/2016/06/sierra-2.jpg?quality=82&strip=all") no-repeat center top;
background-size: cover;
height:800px; /* this can be anything */
display:table; /* required to vertically align the content */
width:100%;
}
.background-module {
display:table-cell; /* required to vertically align the content */
vertical-align:middle; /* required to vertically align the content */
}
.background-info {
background:rgba(0, 0, 0, 0.5); /* required to create the opacity look in your example */
padding: 15px;
text-align: center;
width:50%;
margin:0 auto;
}
Here is a link to a working fiddle > https://jsfiddle.net/czy5ycsr/
solution4
1 2017-01-04 17:06:03
You can try something like this
HTML:
<div class="container">
<div class="inner">
<div class="content">
<p>Content</p>
<div class="overlay"></div>
</div>
</div>
</div>
CSS:
.container {
width:1400px;
background: white url(http://lorempixel.com/1400/1200/nature/1/) no-repeat center;
height: 400px;
padding: 50px 0;
margin : 20px auto;
}
.content {
display:block;
width: 50%;
height: 200px;
background:transparent;
margin: 0 auto;
position:relative;
}
.overlay {
width:100%;
height:200px;
background: rgba(0,0,0,0.7);
position:absolute;
left:0;
top:0;
z-index: 0;
}
p {
padding: 20px;
color: #FFFFFF;
position: relative;
z-index: 1;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.