CSS3 Image Values/Replaced Content support in Opera Presto 2.10
- W3C reference
-
W3C CSS3 Image Values and Replaced Content module
- Opera article
-
The CSS3 object-fit and object-position properties
On this page...
Opera Presto provides support for the W3C CSS3 Image Values and Replaced Content module as described in the following tables.
Please note that this CSS3 module is defined by the W3C as a work in progress, and the content may change at any time.
For further reference, items are hyperlinked to their respective place in the online W3C CSS3 Image Values and Replaced
Content module.
|
Notation
|
Comment
|
Support
|
- dpi (dots per inch)
- dpcm (dots per centimeter)
- dppx (dots per "px" unit)
|
The default resolution of raster images in CSS is "1dppx".
|
No
|
|
Notation
|
Comment
|
Support
|
- <url>
- <image-list>
- <element-reference>
- <image-combination>
- <gradient>
|
The <image> value type denotes a 2D image.
Notes:
- Only
<url> and <gradient> are currently supported.
|
Partial
|
|
Syntax
|
Comment
|
Support
|
background-image: url(wavy.png);
|
The simplest way to indicate an image is to reference an image file by URI.
|
Yes
|
background-image: url('logos.png#xywh=10,30,60,20')
|
A portion of an image may be referenced (clipped out and used as a standalone image) by use of fragment identifiers.
|
No
|
|
Syntax
|
Comment
|
Support
|
<image-list> = image(
[ <image-decl> , ]*
[ <image-decl>
<color>
<element-reference>
<image-combination>
<gradient> ] )
|
The image() notation allows an author to specify multiple images, each one a fallback for the previous.
|
No
|
|
Syntax
|
Comment
|
Support
|
<element-reference> = element(
[<id-selector>
<identifier> ] )
|
The element() function allows an author to reference an element in the document that should be used as an image.
|
No
|
|
Syntax
|
Comment
|
Support
|
<image-combination> = cross-fade(
<image>, <image>,
<percentage> )
|
When transitioning between images, CSS requires a way to explicitly refer to the intermediate image that is a combination
of the start and end images. This is accomplished with the 'cross-fade()' function, which indicates the two
images to be combined and how far along in the transition the combination is.
|
No
|
|
Syntax
|
Comment
|
Support
|
<gradient> =
[ <linear-gradient>
| <radial-gradient>
| <repeating-linear-gradient>
| <repeating-radial-gradient> ]
|
A gradient is an image that smoothly fades from one color to another. Using the Opera -o- vendor prefix, Opera
Presto supports:
- -o-linear-gradient()
- -o-repeating-linear-gradient()
- -o-radial-gradient()
- -o-repeating-radial-gradient()
|
Yes
|
|
Syntax
|
Comment
|
Support
|
<linear-gradient> = linear-gradient(
[ [ <angle> | [ to <side-or-corner> ] ] ,]?
<color-stop>[, <color-stop>]+
)
<side-or-corner> = [left | right] || [top | bottom]
|
- A linear gradient is created by specifying a gradient-line and then several colors placed along that line.
- Note: The Opera -o- vendor prefix must be used.
- Note: Opera also supports the former syntax without "to" until the vendor prefix is dropped.
- Note: Opera currently interprets angles according to an older specification: 0deg points right, angles increase counter-clockwise.
|
Yes
|
|
Syntax
|
Comment
|
Support
|
<repeating-linear-gradient> = repeating-linear-gradient(
[ [ <angle> | [ to <side-or-corner> ] ] ,]?
<color-stop>[, <color-stop>]+
)
<side-or-corner> = [left | right] || [top | bottom]
|
- Takes the same values and is interpreted the same as its respective non-repeating sibling defined previously.
- When rendered, however, the color-stops are repeated infinitely in both directions.
- Note: The Opera -o- vendor prefix must be used.
- Note: Opera also supports the former syntax without "to" until the vendor prefix is dropped.
- Note: Opera currently interprets angles according to an older specification: 0deg points right, angles increase counter-clockwise.
|
Yes
|
|
Syntax
|
Comment
|
Support
|
<radial-gradient> = radial-gradient(
[<position>,]?
[[
[<shape> || <size>]
|
[<length> | <percentage>]{2}
],]?
<color-stop>[, <color-stop>]+
)
|
- A radial gradient is specified by first pinpointing the center of the gradient, where the 0% ellipse will be, then specifying the size and shape of the 100% ellipse, ending with a list of color-stops just like a linear-gradient.
- Note: The Opera -o- vendor prefix must be used.
|
Yes
|
|
Syntax
|
Comment
|
Support
|
<repeating-radial-gradient> = repeating-radial-gradient(
[<position>,]?
[[
[<shape> || <size>]
|
[<length> | <percentage>]{2}
],]?
<color-stop>[, <color-stop>]+
)
|
- Takes the same values and is interpreted the same as its respective non-repeating sibling defined previously.
- When rendered, however, the color-stops are repeated infinitely in both directions.
- Note: The Opera -o- vendor prefix must be used.
|
Yes
|
|
Syntax
|
Comment
|
Support
|
<color-stop> = <color> [ <percentage> | <length> ]?
|
Color-stops are points placed along the line defined by the gradient-line at the beginning of the rule. Color-stops must
be specified in order. Percentages refer to the length of the gradient-line, with 0% being at the starting point and 100%
being at the ending point. Lengths are measured from the starting-point in the direction of the ending-point.
|
Yes
|
|
Value
|
Comment
|
Support
|
from-image || <dpi>
|
The image-resolution property specifies the resolution of images.
|
No
|
|
Value
|
Comment
|
Support
|
<angle>
|
This property provides a way to specify an "out-of-band" rotation to be applied to image source data.
|
No
|
|
Value
|
Comment
|
Support
|
auto | optimize-contrast
|
This property provides a hint to the user-agent about what aspects of an image are most important to preserve when the image
is scaled, to aid the user-agent in the choice of an appropriate scaling algorithm.
|
No
|
|
Value
|
Comment
|
Support
|
fill | contain | cover
auto | none
|
This property specifies how the contents of a replaced element should be scaled relative to the box established by its used
height and width. It also enables scaling a replaced element's contents up to a specified maximum size or down to a specified
minimum size while preserving its aspect ratio.
- Since this CSS3 Module is not yet a specification, this property requires the addition of the Opera proprietary -o- prefix.
- Opera supports two additional values which are not currently part of this CSS3 work in progress module: "auto" and "none".
|
Yes
|
|
Value
|
Comment
|
Support
|
[
[ <percentage> | <length> | left | center | right ]
[ <percentage> | <length> | top | center | bottom ]?
]
[
[ left | center | right ] || [ top | center | bottom ]
]
|
This property specifies how the contents of a replaced element should be scaled relative to the box established by its used
height and width. It also enables scaling a replaced element's contents up to a specified maximum size or down to a specified
minimum size while preserving its aspect ratio.
Note: Since this CSS3 Module is not yet a specification, this property requires the addition of the Opera proprietary
-o- prefix.
|
Yes
|