HOME | PHP Tutorial | CSS
facebook icon
AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP
PHP Tutorial

PHP forms
HTML Tutorial

CSS Tutorial

CSS background image opacity without affecting child elements, text or content


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 the child elements it isn't.

On the other hand if you will try to use CSS opacity property you will changes the opacity of background and opacity of all the child elements text or content as well, but, you can forge it to get something the some for CSS background image opacity without affecting child elements, text or content.

CSS background image opacity without affecting text, content - how to create - example


You can use after or before pseudo element for background-image..

Example 1:
<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>

HTML cod above will display this result for CSS background image opacity without affecting child elements, text or content - how to create -

css border radius

Note: There is no CSS property background-opacity, but you can forged it by inserting a pseudo element with regular opacity the exact size of the element behind it.

css background image opacity CSS background image opacity without affecting child elements, text or content - css tutorial

321. CSS Tutorial
Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, and XML.
https://www.w3schools.com/css/default.asp

2227. CSS Tutorial - Class and Id
To set a class of elements that share the same properties, the attribute with the same name will be used. On the other hand, you can also use elements id to add styles but it has some restriction when using it. Go on reading to find out more.
https://tutorialehtml.com/en/css-tutorial-class-and-id/

2593. Basic Syntax of CSS - How to Code CSS, css tutorial
Basic Syntax of CSS - How to Code CSS css tutorial
http://www.agernic.com/css-tutorial/syntax-of-css-how-to-code-css.html

2233. CSS Tutorial - Lists
The CSS list attribute allows you to customize the HTML list style and then use an image for the bullet mark. Here is a practical example that uses list style type:
https://tutorialehtml.com/en/css-tutorial-lists/

825. Features of w3resource CSS tutorials

https://www.w3resource.com/css/what-you-will-learn.php

818. CSS Font Families - CSS tutorials - w3resource

https://www.w3resource.com/css/fonts/font-families.php

Your add here
PHP strcmp() function

PHP str_repeat() function

PHP define() function

PHP rtrim() function

PHP strtolower() function

PHP strtoupper() function

PHP ltrim() function

PHP str_split() function

PHP strrchr() Function

PHP md5() function

PHP empty() Function

PHP html_entity_decode() function

PHP ucfirst() function

PHP similar_text() function

PHP implode() function

PHP strip_tags() function

PHP 5 Constants
HTML div class tag attribute
Learn PHP online from the basic to the advanced
CSS Text Size
HTML button link - How to create a button style in HTML
HTML button onclick - How to create a HTML button style onclick