CSS Colors

粉丝

1小时前1小时

行政经理

CSS Colors

CSS supports 140+ color names, HEX values, RGB values, RGBA values, HSL values, HSLA values, and opacity.

RGBA Colors

RGBA color values are an extension of RGB colors with an alpha channel - which specifies the opacity for a color.

An RGBA color value is specified with:

rgba(red, green, blue, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

rgba(255, 0, 0, 0.2);

rgba(255, 0, 0, 0.4);

rgba(255, 0, 0, 0.6);

rgba(255, 0, 0, 0.8);

The following example defines different RGBA colors:

Example

#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */

Try it Yourself »

HSLA Colors

HSLA color values are an extension of HSL colors with an alpha channel - which specifies the opacity for a color.

An HSLA color value is specified with:

hsla(hue, saturation, lightness, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque):

hsla(0, 100%, 30%, 0.3);

hsla(0, 100%, 50%, 0.3);

hsla(0, 100%, 70%, 0.3);

hsla(0, 100%, 90%, 0.3);

The following example defines different HSLA colors:

Example

#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* pastel green with opacity */

Try it Yourself »

CSS opacity Property

The opacity property sets the opacity for the whole element (both background color and text will be opaque/transparent).

The opacity property value must be a number between 0.0 (fully transparent) and 1.0 (fully opaque).

rgb(255, 0, 0);opacity:0.2;

rgb(255, 0, 0);opacity:0.4;

rgb(255, 0, 0);opacity:0.6;

rgb(255, 0, 0);opacity:0.8;

Notice that the text inside the element will also be transparent/opaque!

The following example shows different elements with opacity:

Example

#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* red with opacity */
#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* green with opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* blue with opacity */

Try it Yourself »

★ +1

引用

参与讨论

你可立刻发布并稍后注册。如果你有帐户，立刻登录发布帖子。

粉丝

转到主题列表

CSS Functions Reference
CSS Functions Reference

Cavalry发布主题在教程

CSS Functions Reference CSS Functions CSS functions can be used to calculate values, manipulate strings or colors, create complex gradients and shapes, and more. CSS functions are typically used as values for various CSS properties. Function Description acos() Returns the inverse cosine of a number between -1 and 1 asin() Returns the inverse sine of a number between -1 and 1 atan() Returns the inverse tangent of a number between -∞ and ∞ atan2() Returns the inverse tangent of two values between -infinity and infinity attr() Returns the value of an attribute of the selected element blur() Applies a blur effect to an element brightness() Adjusts the brightness of an element (brighter or darker) calc() Allows you to perform calculations to determine CSS property values circle() Defines a circle clamp() Sets a value that will adjust responsively between a minimum value and a maximum value depending on the size of the viewport color() Allows a color to be specified in a particular, specified color space color-mix() Mixes two color values in a given color space, by a given amount conic-gradient() Creates a conic gradient contrast() Adjusts the contrast of an element cos() Returns the cosine of an angle counter() Returns the current value of the named counter counters() Returns the current values of the named and nested counters cubic-bezier() Defines a Cubic Bezier curve drop-shadow() Applies a drop shadow effect to an image ellipse() Defines an ellipse exp() Returns E raised to the power of the specified number x (Ex) fit-content() Allows you to size an element based on its content grayscale() Converts an image to grayscale hsl() / hsla() Defines a color using the Hue-Saturation-Lightness model (HSL); with an optional alpha component hue-rotate() Applies a color rotation to an element hwb() Defines a color using the Hue-Whiteness-Blackness model (HWB); with an optional alpha component hypot() Returns the square root of the sum of squares of its parameters inset() Defines a rectangle at the specified inset distances from each side of the reference box invert() Inverts the color of an image lab() Specifies a color in the CIE L*a*b color space lch() Specifies a color in the LCH (Lightness-Chroma-Hue) color space light-dark() Enables two color-value settings, and returns the first value if the user has set a light color theme, and the second value if the user has set a dark color theme linear-gradient() Creates a linear gradient log() Returns the natural logarithm (base E) of a specified number, or the logarithm of the number to the specified base matrix() Defines a 2D transformation, using a matrix of six values matrix3d() Defines a 3D transformation, using a 4x4 matrix of 16 values max() Uses the largest value, from a comma-separated list of values, as the property value min() Uses the smallest value, from a comma-separated list of values, as the property value minmax() Defines a size range greater than or equal to a min value and less than or equal to a max value (used with CSS grids) mod() Returns the remainder left over when a number is divided by another number oklab() Specifies a color in the OKLAB color space oklch() Specifies a color in the OKLCH color space opacity() Applies an opacity effect to an element perspective() Defines a perspective view for a 3D transformed element polygon() Defines a polygon pow() Returns the value of a number (x) raised to the power of another number (y) radial-gradient() Creates a radial gradient ray() Defines the offset-path line segment that an animated element should follow rem() Returns the remainder left over when a number is divided by another number repeat() Repeats a set of columns or rows in a grid repeating-conic-gradient() Repeats a conic gradient repeating-linear-gradient() Repeats a linear gradient repeating-radial-gradient() Repeats a radial gradient rgb() / rgba() Defines colors using the Red-Green-Blue model (RGB); with an optional alpha component rotate() Defines a 2D rotation of an element rotate3d() Defines a 3D rotation of an element rotateX() Defines a 3D rotation of an element around the x-axis (horizontal) rotateY() Defines a 3D rotation of an element around the y-axis (vertical) rotateZ() Defines a 3D rotation of an element around the z-axis round() Rounds a number according to the specified rounding-strategy saturate() Adjusts the saturation (color intensity) of an element scale() Defines a 2D scaling of an element scale3d() Defines a 3D scaling of an element scaleX() Scales an element horizontally (the width) scaleY() Scales an element vertically (the height) sepia() Converts an image to sepia sin() Returns the sine of a number (angle) skew() Skews an element along the x- and y-axis skewX() Skews an element along the x-axis skewY() Skews an element along the y-axis sqrt() Returns the square root of a number steps() Creates a stepped timing function for animations tan() Returns the tangent of a number translate() Allows you to re-position an element along the x- and y-axis translateX() Allows you to re-position an element along the x-axis translateY() Allows you to re-position an element along the y-axis url() Allows you to include a file in the stylesheet var() Inserts the value of a custom property ★ +1 Sign in to track progress
- 9分钟前9分钟
- 0篇回复
CSS At-rules Reference
CSS At-rules Reference

Cavalry发布主题在教程

CSS At-rules Reference CSS At-rules CSS at-rules are statements that instruct CSS on how to behave. Each at-rule begins with an @ followed by a name. The table below shows the different at-rules in CSS: At-rule Description @charset Specifies the character encoding used in the style sheet @container Define styles for elements in container, depending on the container's size or style @counter-style Lets you define your own counter styles @font-face Specifies a custom font with which to display text @font-palette-values Allows you to customize the default values of a font-palette @import Allows you to import a style sheet into another style sheet @keyframes Controls the steps in an animation by defining styles for points along the animation sequence @layer Used to control how the CSS cascade layers evaluates the order of styles @media Applies parts of a style sheet based on the result of one or more media queries @namespace Defines an XML namespace to be used in the style sheet @page Customizes the dimension, orientation, and margins of printed pages @property Allows you to define custom CSS properties directly in the stylesheet without having to run any JavaScript. This at-rule has data type checking and constraining, sets default values, and defines whether the property can inherit values or not @scope Allows you to select elements in specific DOM subtrees and target elements precisely without writing overly-specific selectors @starting-style Defines an element's starting styles before the element gets its first style update @supports Used to test whether a browser supports a CSS feature ★ +1 Sign in to track progress
- 9分钟前9分钟
- 0篇回复
CSS Pseudo-elements Reference
CSS Pseudo-elements Reference

Cavalry发布主题在教程

CSS Pseudo-elements Reference CSS Pseudo-elements A CSS pseudo-element is used to style specific parts of an element. For example, it can be used to: Style the first letter or line, of an element Insert content before or after an element Style the markers of list items Style the viewbox behind a dialog box The table below shows the different pseudo-elements in CSS: Pseudo-element Example Example description ::after p::after div::after Inserts something after the content of the specified element ::backdrop dialog::backdrop Styles the viewbox behind a dialog box or popover element ::before p::before div::before Inserts something before the content of the specified element ::file-selector-button ::file-selector-button Selects any button of type <input type="file"> ::first-letter p::first-letter Selects the first letter of every <p> element ::first-line p::first-line Selects the first line of every <p> element ::grammar-error ::grammar-error Styles a text that the browser has flagged as grammatically incorrect ::highlight() ::highlight(custom-name) Selects a custom highlight ::marker ::marker Selects the markers of list items ::placeholder input::placeholder textarea::placeholder Styles the placeholder text of <input> or <textarea> elements ::selection ::selection Styles the user-selected text ::spelling-error ::spelling-error Styles a text that the browser has flagged as incorrectly spelled ::view-transition ::view-transition Represents the root of the view transitions overlay, which contains all view transition on the page ::view-transition-group ::view-transition-group Represents a single view transition snapshot group ::view-transition-image-pair ::view-transition-image-pair Represents a container for a view transition's "old" and "new" view states - before and after the transition ::view-transition-new ::view-transition-new Represents the "new" view state of a view transition ::view-transition-old ::view-transition-old Represents the "old" view state of a view transition ★ +1 Sign in to track progress
- 10分钟前10分钟
- 0篇回复

CSS Colors

推荐的帖子

CSS Colors

RGBA Colors

Example

HSLA Colors

Example

CSS opacity Property

Example

参与讨论

动态

CSS Functions Reference

CSS At-rules Reference

CSS Pseudo-elements Reference

24 小时内在线的用户 1

帐户

导航

搜索

配置浏览器推送通知

Chrome (安卓)

Chrome (台式电脑)

Safari (iOS 16.4+)

Safari (macOS)

Edge (安卓)

Edge (台式电脑)

Firefox (安卓)

Firefox (台式电脑)