CSS3 Image Values/Replaced Content support in Opera Presto 2.7
- 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.
Note: Only <url> is 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. |
No |
|
Syntax
|
Comment
|
Support
|
<linear-gradient> =
linear-gradient(
[
[ [top | bottom] |
| [left | right] ]
||
<angle>
,]?
<color-stop>
[, <color-stop>]+
);
|
A linear gradient is created by specifying a gradient-line and then several colors placed along that line. |
No |
|
Syntax
|
Comment
|
Support
|
<repeating-linear-gradient> =
repeating-linear-gradient(
[
[ [top | bottom] |
| [left | right] ]
||
<angle>
,]?
<color-stop>
[, <color-stop>]+
);
|
Takes the same values and is interpreted the same as its respective non-repeating sibling defined previously. |
No |
|
Syntax
|
Comment
|
Support
|
<radial-gradient> =
radial-gradient(
[<bg-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. |
No |
|
Syntax
|
Comment
|
Support
|
<repeating-radial-gradient> =
repeating-radial-gradient(
[<bg-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. |
No |
|
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. |
No |
|
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 |