Is there a way to darken the background image while keeping the text color the same?
Check out this code snippet on JSFiddle
div {
display:block;
background:url('http://placehold.it/500x500') 0 0 no-repeat;
background-color:rgba(0, 0, 0, 1);
background-size:cover;
height:500px;
width:500px
}
<div>
<h1>Hello, it's me!</h1>
</div>To achieve this effect, you can use the CSS :before pseudo-element.
div {
display: block;
background:url('http://placehold.it/500x500') 0 0 no-repeat;
background-color: rgba(0, 0, 0, 1);
background-size: cover;
height: 500px;
width: 500px;
}
div:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
opacity: 0.4;
z-index: 1;
background-color: black;
}
For a live demo of this code in action, visit this link.
It's clear that adjusting the opacity of the parent element will impact the child element - in this case, the h1.
If you want to avoid affecting the child element, there are a few methods you can consider.
1) Modify the opacity using an image editor (simple and requires minimal code)
2) Utilize a pseudo element to contain the background image and apply the opacity changes there - DEMO
3) Instead of adding the background-image to the div, create another child element to hold the image - DEMO
Remember to adjust the z-index values as needed.
Just like this
<style>
Container {
Position:relative;
}
Container:before {
Content:'';
Position:absolute;
Top:0;
Left:0;
Background-color:rgba (0,0,0,.5);
Width:100%;
Height:100%;
Z-index:2;
}
Container H2 {
Position:relative;
Z-index:3;
}
</style>
I am currently working with cards within a grid system, but I am encountering an issue with resizing when the column size is smaller than medium in the mobile view inside the inspect section. The width does not expand to 100%, regardless of how much I try ...
https://i.stack.imgur.com/yEpSp.pngI am encountering an error while attempting to display my data in a datatable. The structure of my table is as follows: [Table("DimStatus", Schema = "dmg")] public class PolicyState { [Key] ...
When working inside an Angular component, I want to select a div element by id or class. This method works menuDisplayDiv = document.getElementsByClassName("some_class")[0] as HTMLDivElement; menuDisplayDiv = document.getElementById("some ...
Is it possible in this scenario to automatically adjust the row height for <span class="orange">ORANGE</span>? And if there are two or more <span> elements, can the cell be split to accommodate varying heights? (You can use: display: tab ...
How can I use CSS to position a button on the edge of an image? https://i.stack.imgur.com/FEFDC.png Here is my code: <div> <button class="" aria-label="Eat cake">Btn</button> <img class="pull-left" src="style.png" style="widt ...
I'm new to web development and struggling to make my embedded Twitch player use its parent's full width. The height is fine, but using the d-flex class from Bootstrap makes the player extremely thin. Please review my code here: https://jsfiddle. ...
My latest project involves dynamically changing the CSS styles of each individual character in a given text input. For example, if the user types "Stack" into the input field, I want the 'S' to appear in red, 't' in blue, 'a' ...
Hello! I am just starting to learn JavaScript and jQuery. Can you help me with an issue I am experiencing? Basically, I have a table and I need to identify which tr contains a td with the text "Weekly", "Daily", or "Monthly". Once I locate that specific t ...
I would like to display two forms side by side. Currently, I have one form shown here: http://gyazo.com/093efe95337ace40fe633adb88b76c2d. I want the same form to be displayed on the right-hand side as well. .comments-section .comment-form { padding: 20p ...
Can a specific class be removed from the jQuery UI dialog? http://api.jqueryui.com/dialog/#option-dialogClass I'm curious if there is a way to remove a particular class from the dialog. Thank you. ...
In my dropdown menu, I have the following options: <div class="my_div"> <select name="selection" id="select_id"> <option value="0">A</option> <option value="5">B</option> ...
Hey there, I'm looking for assistance with updating the code below to use jQuery 1.10.2. The backslashes are present because I am using it with PHP and need to escape special characters. I'm not very familiar with JavaScript and unsure of the ch ...
I am attempting to fade out a div upon click while also adjusting some CSS properties. The problem I am encountering is that the CSS properties change during the fade out transition, instead of after it has completed. I would like the values to change onc ...
I am encountering an issue with three div elements that have a writing-mode of vertical-rl. Despite setting the writing mode to vertical, the block stacking context is not being displayed from left to right as expected, but rather stacking inline. CSS .v ...
Within my HTML form, I have implemented the flatPickr (calendar picker) component which generates an input field. I am currently exploring how to dynamically change the class of the input field if the error class function returns true. Below is the flatPi ...
When creating an ecommerce website using Wordpress, I utilized Python for scraping data from other websites to compare prices and bulk upload products through a CSV file. My next goal is to learn Vue and transform the website into a PWA as it will be esse ...
My application requires the user to press and hold a button to record audio. However, on mobile devices, when the user holds the button, the browser attempts to select nearby text due to finger pressure. While this behavior is understandable, I want to pre ...
My SVG isn't scaling to 100% width in Safari like it is in IE, Chrome, and Firefox. Despite numerous attempts, I haven't been able to make my SVG stretch across the full width like it does in other browsers. The project is built using React. . ...
The progress on my current website project has been smooth so far, but I'm encountering an issue when testing it in Internet Explorer. Whenever I try to view it in IE, the layout breaks completely. You can check it out at . I've attempted using C ...
I have been working on routing multiple HTML pages in my project. The index.html file loads without any issues, but when I try to load raw.html, an error message pops up: Error: Failed to lookup view "error" in views directory Below is part of my app.j ...