I am currently facing an issue with a div element called signup-box. I have applied an opacity value of 0.65 to it, but unfortunately, this is affecting everything within the div as well. This means that my white text is no longer visible as white and the inputs are also affected. How can I maintain the transparent effect while preserving the design elements I want? http://jsfiddle.net/HKy3F/5/
The opacity property affects everything within the element. To apply transparency only to the background, you can create an image with a 65% transparent black box or use the CSS3 RGBA function to specify black at 65% opacity (not supported in IE < 9).
background: rgba(0, 0, 0, 0.6);
Here is a jsFiddle example demonstrating this. I hope this helps!
Take a look at this solution for your query - try using background rgba instead of opacity on your box.
http://jsfiddle.net/camus/Xy7UR/
#signup-box {
height: 300px;
width: 400px;
background-color: rgba(0,0,0,0.55);
border-radius; 10px;
}
To achieve the desired transparency effect, consider creating a compact PNG image and applying it as the background of the main element. This method ensures compatibility across all web browsers.
Have you experimented with using two separate div elements - one for the background and another for the content?
In my scenario, I utilized a background color of #ffffff with 65% transparency.
Below is the CSS code:
body { background:#000000 ;
margin:auto ;
padding:15px ;
}
#divA { background:#ffffff ; /* defining background */
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
/* For IE 5-7 */
filter: alpha(opacity=65);
/* For Netscape */
-moz-opacity: 0.65;
/* For Safari 1.x */
-khtml-opacity: 0.65;
/* All modern browsers */
opacity: 0.65;
display:block ;
width:300px ;
height:300px ;
margin:auto ;
z-index:1 ;
}
#divB { display:block ; /* content section */
padding:20px ;
width:250px ;
height:260px ;
text-align:center ;
color:#C00 ;
font-family:Arial, Helvetica, sans-serif ;
font-size:24px ;
text-align:center ;
margin:auto ;
z-index:5000 ;
}
Additionally, here is the HTML code to implement this layout:
‹div id="divA"›
‹div id="divB"›text goes here‹/div›
‹/div›
This setup functions correctly in various popular browsers like IE7, IE8, IE9, FF, Opera, Safari, and Chrome
Best wishes!
Cynthia
I've been diligently working on a school project, but I'm encountering some issues with the Sidebar button in the top left corner. Whenever I click on the button, it opens up to display a blank white page. Can anyone provide me with some assistan ...
I keep receiving an alert box saying "Image uploaded" even when the variable $imagename is empty. Below is the script in question: <script> function ajax_post1(ca){ var cat = ca; var name = document.getElementById("name").value; var ...
Struggling to retrieve the selected value from a drop-down list using JavaScript? Even when an item is chosen, do you keep getting 'null' as the result? Let's take a look at the HTML page: <select class="mySelect"> <option val ...
After searching extensively, I couldn't find any examples of PhoneGap/Cordova-based HTML5 apps for Windows Phone 7 that demonstrate how to create a panorama or pivot style app. These are key features of the OS UI that I want to incorporate into my app ...
I am seeking a way to showcase only the most recent value for each group. For example, in the CSV data provided below, the total amount of Bagels in the Cinnamon Raisin variety were collected during three different sampling periods: May 2017, March 2017, ...
I am struggling to grasp the flex structure in Bootstrap. I'm attempting to overlay text on an image within the navbar, but it seems the container of the navbar is causing issues. Perhaps my containers are not set up correctly. Any assistance would be ...
I am currently working with Angular 5 My goal is to generate multiple checkboxes using the code below and provide them with labels <input type="checkbox" *ngFor = "let v of options[0].options" [value]="1" [name] = "1"> Typically, when working with ...
I am fairly new to CSS and have a question about specifying units in the code below. Without specifying units for height and width, the text fits on one line. However, once I add 'px', the text occupies two lines instead. Can anyone explain what ...
I would like to align the text of my list items to the left. Additionally, I want all the icons to be the same size as the envelope icon used in Gmail list item. Currently, my code looks like this: https://i.stack.imgur.com/9LNOs.png How can I achieve th ...
I am working on an html page that includes two select options. The values for these select options are retrieved from a Servlet via an ajax call in the onclick() function. However, I am encountering an issue where the data is not populating into the sele ...
I am utilizing data attributes to transfer information from HTML to JavaScript. The data attributes are derived from MySQL data, so they may contain spaces, resulting in validation errors since spaces are not permitted within attributes. My proposed solut ...
Within a select box identified as 'edit-field-service-line-tid', there is default text displayed as '-Any-'. This particular select field has been generated by Drupal. I am looking to use jQuery to change the text '-Any-' to ...
My code snippets: <article class="featured"> <img src="http://www.placehold.it/300x100/ff0000"> <p> <!--Text--> </p> </article> <article class="sub-featured"> <img src="http://www.placeh ...
I'm looking to create a tabbed menu that displays content in blocks, but I want each block to be the same height. I tried using padding and flexbox, but couldn't get it to work properly. Any suggestions on how to achieve this? .tab-pane { fl ...
Here is the HTML code that I currently have: <div class="post"> <h2 class="title">TITLE: Kausalya</h2> <p class="content">CONTENT: Shaunaka Shakha</p> </div> <div class="post"> <h2 class="title"> ...
I am seeking a solution for changing the text of a button within three columns when a specific 'advice-card' div is clicked on. The text should change to 'Hide' for the clicked div, and the other buttons should switch back to 'Show ...
On my webpage, there is a combination of vertical and horizontal scrolling. Everything works fine when the user swipes left or right exactly, but issues arise when the swipe is not precise along a straight line (diagonally). In this case, both vertical and ...
Trying to showcase a Google map on my website. Check out the code below:- <script> function initializeMap() { var coords = {lat: -25.363, lng: 131.044}; var mapObj = new google.maps.Map(document.getElementById('mapz') ...
I'm looking to adjust the label fontSize in the material ui TextField component. I've discovered the InputLabelProps property which has been helpful, but as shown in the image below, the label appears too cramped when focused. Below is my implem ...
Struggling to make sure all columns in Bootstrap 3 are the same height throughout the page? If you've managed to achieve this with 3 columns, like the example provided here, great job! However, the challenge arises when dealing with nested columns t ...