Let's say I have
<div class="myDiv">Hi there</div>
I want to put a background-image and give it an opacity of 0.5 – but I want that the text I have written will have full opacity (1).
If I would write the CSS like this
.myDiv { opacity:0.5 }
everything will be in low opacity – and I don't want that.
So my question is – How can I get low-opacity background image with full opacity text?
This question is related to
html
css
background
background-image
None of the solutions worked for me. If everything else fails, get the picture to Photoshop and apply some effect. 5 minutes versus so much time on this...
div {
width: 200px;
height: 200px;
display: block;
position: relative;
}
div::after {
content: "";
background: url(image.jpg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
<div> put your div content</div>
Hello to everybody I did this and it worked well
var canvas, ctx;_x000D_
_x000D_
function init() {_x000D_
canvas = document.getElementById('color');_x000D_
ctx = canvas.getContext('2d');_x000D_
_x000D_
ctx.save();_x000D_
ctx.fillStyle = '#bfbfbf'; // #00843D // 118846_x000D_
ctx.fillRect(0, 0, 490, 490);_x000D_
ctx.restore();_x000D_
}section{_x000D_
height: 400px;_x000D_
background: url(https://images.pexels.com/photos/265087/pexels-photo-265087.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);_x000D_
background-repeat: no-repeat;_x000D_
background-position: center;_x000D_
background-size: cover;_x000D_
position: relative;_x000D_
_x000D_
}_x000D_
_x000D_
canvas {_x000D_
width: 100%;_x000D_
height: 400px;_x000D_
opacity: 0.9;_x000D_
_x000D_
}_x000D_
_x000D_
#text {_x000D_
position: absolute;_x000D_
top: 10%;_x000D_
left: 0;_x000D_
width: 100%;_x000D_
text-align: center;_x000D_
}_x000D_
_x000D_
_x000D_
.middle{_x000D_
text-align: center;_x000D_
_x000D_
}_x000D_
_x000D_
section small{_x000D_
background-color: #262626;_x000D_
padding: 12px;_x000D_
color: whitesmoke;_x000D_
letter-spacing: 1.5px;_x000D_
_x000D_
}_x000D_
_x000D_
section i{_x000D_
color: white;_x000D_
background-color: grey;_x000D_
}_x000D_
_x000D_
section h1{_x000D_
opacity: 0.8;_x000D_
}<html lang="en">_x000D_
<head>_x000D_
<meta charset="UTF-8">_x000D_
<title>Metrics</title>_x000D_
<meta name="viewport" content="width=device-width, initial-scale=1">_x000D_
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> _x000D_
</head> _x000D_
_x000D_
<body onload="init();">_x000D_
<section>_x000D_
<canvas id="color"></canvas>_x000D_
_x000D_
<div class="w3-container middle" id="text">_x000D_
<i class="material-icons w3-highway-blue" style="font-size:60px;">assessment</i>_x000D_
<h1>Medimos las acciones de tus ventas y disenamos en la WEB tu Marca.</h1>_x000D_
<small>Metrics & WEB</small>_x000D_
</div>_x000D_
</section> I implemented Marcus Ekwall's solution but was able to remove a few things to make it simpler and it still works. Maybe 2017 version of html/css?
html:
<div id="content">
<div id='bg'></div>
<h2>What is Lorem Ipsum?</h2>
<p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
css:
#content {
text-align: left;
width: 75%;
margin: auto;
position: relative;
}
#bg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url('https://static.pexels.com/photos/6644/sea-water-ocean-waves.jpg') center center;
opacity: .4;
width: 100%;
height: 100%;
}
So here is an other way:
background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url("your_image.png");
<!DOCTYPE html>
<html>
<head></head>
<body>
<div style=" background-color: #00000088"> Hi there </div>
<!-- #00 would be r, 00 would be g, 00 would be b, 88 would be a. -->
</body>
</html>
including 4 sets of numbers would make it rgba, not cmyk, but either way would work (rgba= 00000088, cmyk= 0%, 0%, 0%, 50%)
This can be done by using the different div class for the text Hi There...
<div class="myDiv">
<div class="bg">
<p> Hi there</p>
</div>
</div>
Now you can apply the styles to the
tag. otherwise for bg class. I am sure it works fine
Source: Stackoverflow.com