Jquery css background rgba

CSS background-color Property

The background-color property sets the background color of an element.

The background of an element is the total size of the element, including padding and border (but not the margin).

Tip: Use a background color and a text color that makes the text easy to read.

Default value:	transparent
Inherited:	no
Animatable:	yes. Read about animatable Try it
Version:	CSS1
JavaScript syntax:	object.style.backgroundColor=»#00FF00″ Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

CSS Syntax

Property Values

Value	Description	Demo
color	Specifies the background color. Look at CSS Color Values for a complete list of possible color values.	Demo ❯
transparent	Specifies that the background color should be transparent. This is default	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

More Examples

Example

Specify the background color with a HEX value:

Example

Specify the background color with an RGB value:

Example

Specify the background color with an RGBA value:

Example

Specify the background color with a HSL value:

Example

Specify the background color with a HSLA value:

Example

Set background colors for different elements:

body <
background-color: #fefbd8;
>

h1 background-color: #80ced6;
>

div background-color: #d5f4e6;
>

span background-color: #f18973;
>

Источник

Change background color with rgb function in jQuery

The following code shows how to change background color with rgb function.

Example

 !-- ww w .jav a2s . c o m--> html> head> script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">  script type="text/javascript"> $(document).ready(function()< $("td:empty").text("Was empty").css('background', 'rgb(255,220,200)'); >);  body> table> tr>td>data td>java2s.com  tr>td>data td>   tr>td>data td>      

The code above generates the following result.

Источник

CSS rgba() Function

The rgba() function define colors using the Red-green-blue-alpha (RGBA) model.

RGBA color values are an extension of RGB color values with an alpha channel — which specifies the opacity of the color.

Browser Support

The numbers in the table specify the first browser version that fully supports the function.

CSS Syntax

Value	Description
red	Defines the intensity of red as an integer between 0 and 255, or as a percentage value between 0% and 100%
green	Defines the intensity of green as an integer between 0 and 255, or as a percentage value between 0% and 100%
blue	Defines the intensity of blue as an integer between 0 and 255, or as a percentage value between 0% and 100%
alpha	Defines the opacity as a number between 0.0 (fully transparent) and 1.0 (fully opaque)

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Change Div Background Color On Hover Using CSS or jQuery

In this tutorial, learn how to change div background color on hover using CSS or jQuery. The short answer is to use the CSS :hover selector with background property to give background color.

You can also use the jQuery hover() along with css() function to change the background color on hover. Let’s find out with the examples given below.

Method 1: Change Div Background Color On Hover Using CSS

To create a background hover effect on the div element, you have to use the :hover css selector which uses the CSS background property. To give the background color, you can use the div class to select the div.

Take your mouse pointer over the div box above to see the color change on hover using CSS. The background color change on hover to show div content in an attractive way.

Method 2: Using jQuery hover() with css() Function

Initially, you have to use the CSS background property to give background color to the div element. To use the jQuery method and create a hover effect or event of the mouse, you have to use the hover() function of jQuery.

Inside the function hover() function, you have to use the jQuery css() to apply the CSS background property and change the color on the hover.

In addition to this, you also need to add the else function to apply the initial CSS background color using jQuery. See the example to find out how to perform this task.

Источник