The text color is being influenced by the transparent background behind it

I have a box with a transparent background color. Below is the CSS and HTML code that I'm using:

CSS:

#box {
    color: black;
    text-align: center;
    margin: 50px auto;
    background: blue;
    opacity: 0.1;
    border-radius: 11px;
    box-shadow: 1px 1px 1px #656565;
    padding: 20px;
    font-size: 25px;
}

HTML:

<div id="box" class="center">
    I need this text to be in black color.
</div>

If you want to see a live demo, click here: http://jsfiddle.net/jrmXh/

The issue I'm facing is that even though the text color is set to black, it's not showing up properly. I'd appreciate it if someone could help me understand why this is happening and how to resolve it.

htmlcsstransparencyopacity

Answer №1

The opacity property has an impact on all child elements of the element to which it is applied. This means that both the element itself and any nested elements will appear either opaque or transparent. To achieve the desired effect, you should use an rgba value for the div:

#box {
  color:black; 
  text-align:center; 
  margin:50px auto; 
  background: rgba(0,0,255,0.1); 
  border-radius:11px; 
  box-shadow:1px 1px 1px #656565; 
  padding:20px;
  font-size:25px; 
}

Answer №2

Remove the opacity and set the background color to be transparent, as shown below- 

#container {
color: black;
text-align: center;
margin: 50px auto;
background: rgba(0, 0, 255, 0);
border-radius: 11px;
box-shadow: 1px 1px 1px #656565;
padding: 20px;
font-size: 25px;
}

Answer №3

Implement the following adjustments –

  1. Erase Opacity
  2. Replace blue with background-color:rgba(0,0,255,0.1);

The body's background color is currently white, which is why the transparency isn't visible. Modify the body color to observe the Transparency (alpha in rgba) effect.

Use this code snippet to test the transparency effect - Alpha in rgba

<style>
  body{
    background-color:#FF0000;
  }
</style>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What strategies can we implement to reduce the gutter width in Bootstrap 3?

Is there a way to decrease the gutter-width in Bootstrap 3? Since Bootstrap uses a 12-grids system, using col-sm-* creates a gap between elements of around 30px (15px on each side of the grid-column). However, my theme requires less space between columns ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Vanilla JS method for resetting Bootstrap 5 client-side validation when focused

I'm currently exploring Bootstrap 5's client-side validation feature. However, I've encountered a usability issue with the is-invalid class. After clicking the submit button, this class persists until the correct input is entered. I would li ...

javascripthtmlcsstwitter-bootstrap

How do I prevent my image slider from scrolling to the top of the page when I click next or prev?

<script> export default { name: "ImageSlider", data() { return { images: [ "https://cdn.pixabay.com/photo/2015/12/12/15/24/amsterdam-1089646_1280.jpg", "https://cdn.pixabay.com/photo/2016/02/17/2 ...

javascripthtmlvue.js

Tips for retrieving the user-input value from an HTML text field

Exploring the world of JS, I set out to create a basic calculator after just one week of lessons. However, I hit a roadblock when trying to extract user-input values from my HTML text fields. Here's a snippet of my html: <div class="conta ...

javascripthtml

CSS hover effect not working while mouse is in motion

As a beginner in HTML, CSS, jQuery, and JavaScript, I've been trying to trigger a div when hovering over one area using the adjacent siblings code. However, I'm encountering an issue where if I move my mouse after triggering the event, it keeps r ...

csshoversiblings

Is there a way to use jQuery to animate scrolling on a mobile web browser?

I'm trying to make the page scroll to a specific position when a button is clicked. The code I currently have works fine on browsers like Chrome and IE, but doesn't seem to work on any mobile browser. Below is the code snippet I am using: $("#p ...

javascriptjqueryhtmlmobilemobile-browser

Why does my dialog box only open the first time and not the second time?

I have created my own custom dialog box using jQuery and it seems to be working fine initially. However, after closing it once, when I try to open it again nothing appears. Can anyone help me identify what's causing this issue? Below is the source co ...

javascriptphpjqueryhtml

Ensure that the dropdown <select> remains open even while filtering through options

I am currently working on implementing a mobile-friendly "filtered dropdown" design: Usually, a <select> control remains closed until the user clicks to open it. Is there a straightforward way to keep it always open? I understand that this would ma ...

cssvue.jsdrop-down-menumobile-website

Customizing Material-UI: A guide to overriding inner components

Looking to customize the styles of a Material UI Switch for the small variation? I have applied global styles but now want to override the styles of elements like track and thumb. Targeting the root element with the sizeSmall class is working, but unsure o ...

cssreactjsmaterial-uijss

Is it possible to have more than one button for each item on my Shopping List App?

I am developing a shopping list app that allows users to add items to a list. Each item added triggers the display of a button next to it, enabling users to remove the item from the list when needed. However, a problem arises as more items are added – i ...

javascriptjqueryhtmlcss

The $_GET variable disappears once the form is submitted

Here's the issue I'm facing: On my homepage, there are tables with rows generated from the database using while loops. Each row includes a cell where an event can be added to that specific row. To achieve this, I pass the row ID as a $_GET variab ...

phpmysqlhtmldatabase

PHP table not displaying data

I am brand new to this and currently enrolled in a class with an unhelpful professor. I am attempting to read data from a file into a table, but for some reason the data is not displaying. I have tried multiple approaches, but I am feeling quite lost. Any ...

phphtml

Master br tag in HTML: a complete guide

I am currently struggling with understanding how to correctly use the line break tag in HTML. During a recent class test, we were tasked with identifying issues within an HTML script, and I mistakenly believed that < /br> was incorrect. I am unsure ...

html

What is the best way to ensure HTML validation during a pull request?

Are there any tools available to validate all specified files in a pull request? I have previously used Travis CI for testing and am now searching for a similar plugin focused on validation rather than tests, such as W3C validation. ...

htmlgithubw3c-validation

Enhance your Bootstrap navigation menu with eye-catching hover effects

Hey everyone, I'm a beginner in web development and I'm attempting to incorporate a hover effect into my navigation menu. I want it to look like the first example in this link: https://codepen.io/Calloumi/pen/vndlH I've tried to replicate t ...

htmlcssbootstrap-4

What is the reason behind the overflow in the HTML body?

I am currently honing my skills in front-end development by attempting to replicate the functionality of . Everything seems to be working fine, except for the fact that there is an overflow issue identified within the <body> element when inspecting w ...

htmlcss

What's with the lack of acknowledgment when I triumph in rock, paper, scissors, lizard, spock?

My game is running smoothly, except for when lizard or spock are involved and I win. For some reason, the outcome does not display correctly, even though it works fine when I lose. I've double-checked for typos but couldn't find any. If someone c ...

javascripthtml

Toggle css comment line using gulp

Is it possible to temporarily deactivate a particular CSS comment on a specific line using Gulp and then reactivate it after completing a build task? As an illustration, I am interested in deactivating the @import 'compass/reset'; statement loca ...

cssnode.jsnpmgulpcompass

Angular textbox with dynamic concatenated name functionality

Hello, I'm currently working with some code that looks like this: <div *ngFor="let phone of phoneList; let phIndx = index;"> <div class="peoplePhoneTxtDiv"> <input [disabled]="phone.disabled" class="peoplePhoneTxtBox" type="text" ...

angularhtmltypescriptangular5

Please proceed with submitting your choices in the order that you have selected

My goal is to submit options from a dropdown list in the order they are selected, rather than in the order they appear in the list. How can I achieve this? Here is the HTML code for the dropdown: < select style = "padding: 1em;" name = "skills" multi ...

javascriptjqueryhtml