Opacity Problem

HTML & CSS
1

Sir I am using these codes

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css"> 
 
* { margin: 0; padding: 0; }
 
body{
	margin:0 auto;
}
 
.box
{
	float:left;
	width:20%;
	height:200px;
	border:1px solid silver;
	padding:30px;
	box-shadow: 0px 0px 10px 10px #72B3D3;
	margin:20px;
}
 
.fit
{
		background-size:contain;
		background-repeat:no-repeat;
		background-position:center center;
		background-origin: padding-box;
		opacity:0.5;
}
 
.image1{
	background-image:url(accountsBG.jpg);
}
 
.image2{
	background-image:url(calendar.png);
}
 
</style>
 
</head>
 
<body>
 
<div class="box image1 fit">
	<h1><img src="Book.png" alt="abc" height="25" width="25"/>
     	Opacity must be applied only on background image
    </h1>
</div>
 
 
<div class="box image2 fit">
<a href="">
	<h1>
 		<img src="base.png" alt="abc" height="25" width="25"/>Padding:30px; class ON .box also does not work
 	</h1>
</a>
</div>
 
</body>
 
</html>

the result is like this

848×296 61.8 KB

Opacity must not applied on whole div,
Opacity should be applied only on background image.
Other contents must be remain normal.

Padding also does work.

Please help

2

Hi,

I’m afraid opacity doesn’t work like that and once its applied to an element it becomes ‘atomic’ in that the element and all descendants will all have the opacity applied and it cannot be reset on children.

There is a solution that involves using an absolutely placed pseudo element to hold the opacity which is then confined to that element only as it just contains the background image only.

The padding is working fine and is applied in your rules which can be seen by increasing or decreasing the padding. Maybe you were expecting something else?

3

Hi there tqmd1,

check out the attachment, which includes
your images with applied 50% opacity. :winky:

tqmd1.zip (94.5 KB)

coothead

4

Here is your code adapted to use the method I mentioned above.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body {
	margin:0;
	padding:0;
}
.box {
	float:left;
	width:20%;
	height:200px;
	border:1px solid silver;
	padding:30px;
	box-shadow: 0px 0px 10px 10px #72B3D3;
	margin:20px;
}
.box a{display:block}
.fit{position:relative;z-index:0;}
.fit:after {
	content:"";
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center center;
	opacity:0.5;
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	z-index:-1;
}
.image1:after {
	background-image:url(accountsBG.jpg);
}
.image2:after {
	background-image:url(calendar.png);
}
</style>
</head>

<body>
<div class="box image1 fit">
	<h1><img src="Book.png" alt="abc" height="25" width="25"/>
     	Opacity must be applied only on background image
    </h1>
</div>
 
 
<div class="box image2 fit">
<a href="">
	<h1>
 		<img src="base.png" alt="abc" height="25" width="25">padding:30px also does work
 	</h1>
</a>
</div>


</body>
</html>

The above will allow you to use any images and have them at half opacity automatically but of course you could simply do as coothead suggests above and make the images 50% opaque to start with and avoid the extra code.

There are 2 things that I note you are using and one is background-origin:padding-box which is a wasted rule as that is the default and not needed. I was wondering whether instead you only wanted the background image inside the padding box and then that rule should have had a value of content-box instead? However it’s not needed in my example as you would simply use the top, left, right and bottom with appropriate offsets to indent the background image as required.

The other thing I notice is that you are using ‘background-size:contain’ which means the image may not always fill the background completely and you will get gaps at top or side when the element can no longer fit the image. Perhaps you meant to use the value cover instead of contain?

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.