url()
The URL function represents a reference to a resource, passing in links and relative addresses, such as
Background-image: url('./ background-image function.png '); background-image: url('https://s3.ax1x.com/2020/11/29/DcV9V1.png');Copy the code
image()
Image functions like a URL, but unlike a URL, image provides the ability to degrade gracefully. Such as
background-image: image('a.webP','a.png','a.jpg');
Copy the code
If the browser supports webP images, apply a.png. If not, test a.png until it fits the current browser. Unfortunately, this function is still in the draft stage.
Therefore, other functions of this function are not concerned for the time being. If you are interested, you can go to MDN for more information and the latest progress
image-set()
Image-set ensures that images can be adapted to different devices with different resolutions, displaying different images according to different device types, as shown in the following example
background-image: -webkit-image-set(url(./bg1x.png) 1x , url(./bg2x.png) 2x);
Copy the code
This example means to display bg1x.png on 1x screen and bg2x.png on 2x screen. In terms of compatibility, the latest and mainstream browsers support this function. For devices that do not support this function, you can use background: URL () before using this function for compatibility.
cross-fade()
Cross-fade is used to apply transparency to two background images that are superimposed. Use the following
background-image: -webkit-cross-fade(url('./bg1x.png'),url('./bg2x.png'),70%);
Copy the code
The first two parameters are the resource location of the image, and the last one needs to be passed in as a percentage, representing transparency, which is relative to the last image. For example, when the percentage is 0%, only the first image should be displayed
When the percentage is 100%, only the second image is displayed.
This property, which is completely incompatible with Firefox, is much more compatible with Chrome and Safari
element()
The Element function can be used to treat a part of the element on the site as a picture. The attributes that apply to the image also apply to the object to which Element is applied
element(id)
The id must be passed in. See the example below, which uses Element to achieve a function similar to bidirectional binding
<div class="element-wrapper">
<span id="ele" contenteditable>hello world</span>
</div>
<div id="element-test"></div>
//style
.element-wrapper{
width: 200px;
height: 200px;
}
#element-test {
width: 200px;
height: 200px;
background: -moz-element(#ele);
background-size: contain;
background-repeat: no-repeat;
}
Copy the code
rendering
More interesting effects can be achieved with this property, which can be found here. In terms of compatibility, unfortunately, this property is currently only supported by Firefox
The last
I’ve been summarizing CSS functions recently, a series of Outlines
This is the third article in a series that is now in production
- CSS functions those things (a) compare functions
- CSS functions attr()
The project will contain the test code in the article, have done the corresponding classification, welcome to continue to pay attention to, if there is help you can point a like oh! Project address stamp here