Applying a 30% opacity to a linear gradient

I need some help achieving a 30% opacity for my linear gradient. I've converted my hexadecimal color codes to rgba, set the opacity to 30%, but the whole gradient is not appearing as intended. Instead of a solid gradient over my image, I want the entire gradient itself to have a 30% opacity when placed over the image. Can someone please assist me?

.img-container::after {
      content:"";
      display:block;
      position:absolute;
      top:0;
      bottom:0;
      left:0;
      right:0;
      background: linear-gradient(to right, rgba(243,104,25,0.3), rgba(0,0,0,0.3));
    }

Answer №1

No alpha value was provided in the rgba declaration you used.

Basically, this represents a solid color:

rgba(243,104,25);

The following is the same color with 30% opacity:

rgba(243,104,25,0.3);

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

Chrome is having trouble displaying Roboto font correctly

I have been experiencing an issue with the rendering of the Roboto font on a client's website. When I view the site in Chrome (version 43.0.2357.65 m), all the different weights of Roboto appear to look the same. For example, here is a comparison: On ...

What is the process for showing a table based on a selected value?

I could use some help - I am working on a <select> element with 4 different options in the form of <option>. What I want to achieve is to have tables that are initially not visible, and then when an option is clicked, the corresponding table wi ...

Ordering data in a dynamic table using JavaScript

After receiving an array of objects in the form of a JSON file and using AJAX to display specific key-value pairs in a table, I am now faced with the task of sorting the rendered table. However, I am uncertain about the steps to take next. <div id=" ...

Difficulty adjusting image size in "layouts with overflowing images on cards."

I have encountered an issue with resizing images on my browser using a card-based layout that I found on codepen. The strange thing is, the image resizing works perfectly fine on codepen itself, but when I try to implement the same HTML and stylesheet on m ...

Effective Methods for Implementing CSS Variables within nth-child Selectors

Objective: To pass a variable successfully as a parameter to nth-child. The task is to make the third line turn green in the example provided. Dilemma: Currently, the parameter is being disregarded as a variable. Inquiry: Is achieving this possible? If s ...

Is there a way to ensure that an inner div always stretches to the full width of the browser window regardless of its parent's width configurations and size?

Can an inner div always be made to have the width of the full browser window regardless of its parent's width settings and dimensions? Additionally, can this div be positioned at the left side of the page with a CSS property of left: 0, relative to th ...

Using a jQuery script, you can enable a back button functionality that allows users

I created a survey to assist individuals in determining where to go based on the type of ticket they have. However, I am currently facing difficulties with implementing a "Back" button that will display the previous screen or "ul" that the user saw. Initia ...

Issue with positioning hover effects on CSS links

I created a basic menu and I'm struggling to understand why the second level links always appear to the right of the first level links. Since the code is quite lengthy, here's a jsfiddle link for reference. Here's what's happening in e ...

What steps can I take to ensure my header image adjusts properly for different screen sizes?

Currently, I am working on creating a website for a friend using an exquisite premium Wordpress theme. Despite having paid for the theme, the designer is unwilling to assist with customization. You can view the site in progress at www.zerocarbonfood.co.uk ...

Switching from a horizontal orientation to a vertical layout for navigation

My current horizontal navigation bar needs to be transformed into a vertical left layout. Here is the HTML code: <div ng-controller="PortalController"> <header> <h1>E_Zuite</h1> <nav role='navigation&apo ...

Issue with fluid layout in CSS - Unable to specify height in pixels and minimum height property not functioning as expected

While working on a liquid layout, I have set all my width and height values in percentages. However, during the design process, I needed to check how my CSS was rendering so I temporarily set the height in pixels. Eventually, the height in percentage wil ...

Is it possible to store CSS and JS files within an Android app that utilizes a webview, similar to Phonegap

Looking to store CSS and JS files for an Android app that utilizes a webview. Want to avoid repeated server requests by storing the files locally on the phone, similar to how PhoneGap operates. Are there any resources or documentation available to help a ...

Guide to incorporating animated material icons in vuetify

in Vuetify makes it easy to utilize mainstream material design icons through the use of the v-icon component. An example of this would be: <v-icon>home</v-icon> I am curious if animated material icons are supported and can be integrated in ...

Challenges with Div Height and Border

Hello there! I've run into a height and border issue with a div. Here's the CSS I'm currently working with: .content { background-image: url(../../images/logo-04.png); background-position: left bottom; ...

Chaos ensues as the HTML contenteditable attribute disrupts the expected structure of the table

Whenever I attempt to click on the edit button to make changes to the content of the Email column, the HTML table structure begins to change in a strange manner. Here is the code snippet causing the issue: <!DOCTYPE html> <html lang="en"> & ...

Unlock the power of Font Awesome with the <i> </i> tag - Nibbler

I could use some assistance with a concept that I'm finding particularly challenging. After running my website through Nibbler, my goal is to achieve a perfect 10/10 score in all (or most) categories. However, I am facing difficulty due to the 17 in ...

Move cursor over the element with a specified attribute

Is it possible to apply a hover effect to an active element without using the disabled attribute? I attempted the code below, but unfortunately, it did not produce the desired hover effect. input.btn:not([disabled]):hover ...

Issues with table nesting functionality

I'm attempting to organize tables in a nested manner, instead of placing a table within each cell. My engineers have advised against simply styling the table to appear nested, and suggested that it would be more effective to wrap each header around th ...

Unexpected Visual Basic Web Label Formatting

I am facing an issue with the styling of a complex label. The CSS code doesn't always apply as expected. Interestingly, when I ran this code on two different machines, the styles were inconsistent. The code seems messy and disorganized to me, but al ...

Guide on excluding certain words within a paragraph using PHP

In my database, there is a paragraph that looks like this: $str ="this is a paragraph i show shortly and when i click on the view more it will show completely for that i am using the ajax and retrieve it " I display it as follows: this is a paragrap ...