The see-through background causes my text to blend in seamlessly as well

While creating a text box with a black transparent background, I encountered an issue where the text also became transparent. Can someone please point out where I went wrong?

style.css

#headertxt  {
position: absolute;
right: 20px;
bottom: 100px;
background-size: auto;
background: black;
 padding: 10px 10px 10px 10px;
 opacity: 0.7;
 filter: alpha(opacity=70); 
 }

 #headertxt a {
text-align: right;
color: white;
}

html :

   <div id="headertxt">
    <a>Zvani <span class="head"> (+371) 29 256 487</span><br /></a>
     <a>  Raksti <span class="head"><ahref="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="51383f373e1133243a35303f3630227f3d27">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a1c8cfc7cee1c3d4cac5c0cfc6c0d28fcdd7">[email protected]</a></span><br /></a>
     <a>Redzi mūs <span class="head"><a href="/ka-mus-atrast/">kartē</a>
      <br/></a>
        <a><span class="head">N 57° 11' 22" E 22° 12' 46"</span><br />  </a>
                    <hr>
                    <a>REKVIZĪTI</a>
                            </div>

Answer №1

opacity and filter are both being used on the entire element. To fix this, switch to the rgba format for the background like so:

background: rgba(0, 0, 0, 0.7);

Remove the opacity and filter properties entirely.

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

Is it possible to use Chrome developer tools to find out the current file's name?

I am having difficulty locating a specific code within my online shop on Prestashop. The meta-data of the current page contains the content="Shop on PrestaShop" string, but when I search for it in Webstorm to identify which page file it is located in, I ca ...

Instructions for implementing this script in HTML and JavaScript: utilize the clone() function

I came across this code snippet here function displaytickets(){ var $panel = $('<div/>').addClass('col-xs-3 panel panel-default') $panel.append($('<div><h3 class="panel-title">Title</h3></div>&a ...

Is there a way to perfectly align the content at the center of the section?

I'm trying to ensure that the content in each section is centered. What is the correct way to achieve this? Should I focus on the containers/rows for alignment? I have tried placing the alignment properties in different elements (section, container, r ...

`Turn nested JSON into a formatted list using jquery`

I am currently facing two challenges: I am having trouble with the HTML structure, as shown in the image below Current HTML structure: https://i.stack.imgur.com/GH46J.png Desired HTML structure: https://i.stack.imgur.com/Dq3Gn.png How can I create d ...

Tips for positioning a box on top of a map in a floating manner

I am trying to figure out how to position the div with class box on top of the map in this jsbin. Can someone help me achieve this? Below is the CSS code I have for styling the box and body. body { font-family: "Helvetica Neue", Helvetica, sans-serif; ...

Validate the presence of an element on a page using selenium

I attempted to use the following code: if driver.find_element_by_xpath("/html/body/div[2]/div[3]/div[1]/div[1]/button"): pass believing it would be successful, however it did not work and instead resulted in: selenium.common. ...

What is the best way to eliminate the border in IE edge that surrounds special characters?

Here is the current appearance of the cross button in IE/Edge: https://i.sstatic.net/JZ37V.png And here is how it is supposed to look: https://i.sstatic.net/Uqafg.png Upon inspecting the CSS, it reveals that the #10006 html character has a color code o ...

When setting an empty URL with Fabricjs' setBackgroundImage function, a null reference error occurs in the _setWidthHeight

Recently, I stumbled upon an article detailing a method to clear the background of a fabric canvas... canvas.setBackgroundImage('', canvas.renderAll.bind(canvas)); In the development of my online design tool which utilizes Fabricjs 1.4.4, I have ...

`How to implement text that changes dynamically within images using HTML and PHP`

I'm working on a PHP website with Codeigniter and I have a requirement to insert HTML text into an image fetched from a database. The content of the text will vary based on different profiles. Below is the image: The text "$40" needs to be dynamic. H ...

Transform the binary image data sent by the server into an <img> element without using base64 encoding

It's been a challenge trying to find a reliable method for adding custom request headers to img src, so I'm experimenting with manually downloading the image using ajax. Here is an example of the code I am working on: const load = async () => ...

The Ajax request is frozen in the POST method

Currently, I have a basic webform consisting of textareas that are used to input data through CGI into a SQL database and this is functioning as expected. However, my issue arises from the fact that besides using <input type='submit'/> to ...

Transform one div to another using a CSS animation slide

I am experiencing an issue with two divs (page1 + page2) inside a container (also a div). The container has overflow:hidden property, but when the animation starts, the overflow configuration is being ignored. Additionally, the page that should be displaye ...

How can you iterate over the input elements that are currently visible within a form using Javascript?

Is there a way to clear the values of all visible input fields in a form using JavaScript? I'm currently struggling with setting text inputs to empty as they come out as undefined. Any suggestions on how to achieve this? ...

The login page allows entry of any password

I'm running a xamp-based webserver with an attendance system installed. I have 10 registered users who are supposed to log in individually to enter their attendance. However, there seems to be an issue on the login page where any password is accepted ...

Retrieve the width of an element once the browser has finalized its dimensions

I am facing an issue with centering a pop-up box perfectly within the window using CSS properties. The code for the pop-up box styling is as follows: #pop_up { position: fixed; display: inline-block; border: 2px solid green; box-shadow: 0p ...

Is there a way to share the Username and Password without the need to manually input it?

My goal is to develop a C++ application for my classmates at school. Currently, they are required to visit our school's website and navigate to the login page. Once there, they enter their username and password, log in, and proceed to find their spec ...

Functionality fails to load correctly post completion of AJAX request

After successfully implementing an API call to OS Maps (UK map builder) as per their documentation, I encountered a problem when trying to display a map based on a custom field name using ACF (Advanced Custom Fields) in WordPress. The issue arises because ...

Modifying the state object in ReactJS: A step-by-step guide on updating values

Below my query and explanation, you will find all the code. I am currently attempting to update the state in a grandparent class. This is necessary due to file-related reasons, and I am using Material-UI for text boxes. Additionally, I am implementing Red ...

How to solve z-index issues with two absolutely positioned divs in IE6

Dealing with IE6 bugs has left me exhausted. The problem lies in two (position:absolute) divs that are not functioning properly in terms of their z-index. Here is an example: /* css */ #overlay{ position:absolute; height:1200px; z-index:2; ...

Is Consistency Possible with CSS Transition Direction?

Take a look at this example: https://codepen.io/jon424/pen/XWzGNLe In the provided code snippet, there is a button that can toggle the visibility of an image. When clicked, the image disappears from bottom to top and reappears when clicked again. The use ...