CSS3 Image Values/Replaced Content support in Opera Presto 2.9

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.

Resolution units

<resolution>

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

Image values

<image>

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

url()

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

image()

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

element()

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

cross-fade()

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

Gradients

<gradient>

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

linear-gradient()

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

repeating-linear-gradient()

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

radial-gradient()

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

repeating-radial-gradient()

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

<color-stop>

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

Sizing properties

image-resolution

Value Comment Support
from-image || <dpi>
The image-resolution property specifies the resolution of images. No

image-orientation

Value Comment Support
<angle>
This property provides a way to specify an "out-of-band" rotation to be applied to image source data. No

image-rendering

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

object-fit

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

object-position

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

Documentation

Opera Help

Need help? Hit F1 anytime while using Opera to access our online help files, or go here.