Skip to content

Instantly share code, notes, and snippets.

@nm-scripts

nm-scripts/css-background-image-opacity-without-affecting-text-content.html

Created January 8, 2020 17:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nm-scripts/bfbf30cf2d76bf5978fed7ac33c13be3 to your computer and use it in GitHub Desktop.
Save nm-scripts/bfbf30cf2d76bf5978fed7ac33c13be3 to your computer and use it in GitHub Desktop.
Download ZIP
CSS property as background-opacity that you wish to use only for changing the opacity or transparency of an CSS element's background without affecting text. https://www.agernic.com/css-tutorial/css-background-image-opacity-without-affecting-text-content.html
Raw
css-background-image-opacity-without-affecting-text-content.html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body {
font-family: "Comic Sans MS", cursive;
font-size: 18px;
font-weight: bold;
color: #036;
}
h1,h2,h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
}
.image:after {
content:'';
position: absolute;
top:0px;
left: 0px;
width:728px;
height:90px;
z-index:-1;
opacity: 0.4;
background: url('https://www.agernic.com/uploads/banner-adv.jpg') no-repeat center center;
}
.image-second:after {
content:'';
background: url('https://www.agernic.com/uploads/banner-adv.jpg') no-repeat center center;
position: absolute;
top:0px;
left: 0px;
width:728px;
height:90px;
z-index:-1;
opacity: 0.2; /* Here is your opacity */
}
.image {
position: relative;
width:728;
padding:6px;
font-weight:bold;
text-align:center;
font-size: 16px;
color: #066;
font-family: "Comic Sans MS", cursive;
margin-top: 10px;
margin-bottom: 10px;
height: 90px;
}
.image-second {
position: relative;
width:728;
padding:6px;
font-weight:bold;
text-align:center;
font-size: 16px;
color: #066;
font-family: "Comic Sans MS", cursive;
margin-top: 10px;
margin-bottom: 10px;
height: 90px;
}
</style>
<head> <body>
Examples:
<div class="image">
<h1>CSS background image opacity without affecting text, content </h1>
Your text here. </div>
<div class="image">
Your text here.
How can i change background image opacity without changing on div content?<br />
css background image opacity without affecting child elements<br />
</div>
<div class="image-second"> Your text here.
How can i change background image opacity without changing on div content?<br />
CSS background image opacity without affecting text<br />
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment