CSS function those things (III) background image function

Time:2022-5-14

CSS function those things (III) background image function

url()

The URL function represents a reference to a resource, which can pass 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');

image()

Image functions are similar to URLs, but unlike URLs, image provides agraceful degradation Ability. such as

background-image: image('a.webP','a.png','a.jpg');

This code means that if the browser supports webp format, apply a.webp for pictures. If not, test a.png again until it is adapted to the current browser. Unfortunately, this function is still in the draft stage.

CSS function those things (III) background image function

Therefore, other functions of this function will not be paid attention to for the time being. Students who are interested can go to MDN to learn more relevant informationLatest progress

image-set()

Image set can ensure the adaptation of pictures on different resolution devices, and can display different pictures according to different device types. See the following example

background-image: -webkit-image-set(url(./bg1x.png) 1x , url(./bg2x.png) 2x);

This example means that bg1x is displayed on the double screen Png, display bg2x on 2x screen png 。 In terms of compatibility, the latest mainstream browsers have supported it. For unsupported devices, you can use background: URL () to be compatible before using this function.

CSS function those things (III) background image function

cross-fade()

Cross fade is used to apply transparency to two superimposed background images. The usage is as follows

background-image: -webkit-cross-fade(url('./bg1x.png'),url('./bg2x.png'),70%);

CSS function those things (III) background image function

The first two parameters are the resource location of the picture. The last one needs to pass in a percentage to indicate the transparency. This transparency is relative to the last picture. For example, when the percentage is 0%, only the first picture should be displayed at this time

CSS function those things (III) background image function

When the percentage is 100%, only the second picture is displayed.

CSS function those things (III) background image function

This attribute is completely incompatible in Firefox, but it is much better in chrome and safari

CSS function those things (III) background image function

element()

The element function can use some elements on the website as pictures. It is applicable to the attributes of pictures, as well as the object to which the element is applied

element(id)

What must be passed in is the ID. look at the following example. Element is used to realize a function effect similar to two-way 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;
      }

design sketch

CSS function those things (III) background image function

This attribute can also achieve more interesting effects, and more interesting effects can be usedView hereIn terms of compatibility, unfortunately, only Firefox currently supports this attribute

CSS function those things (III) background image function

last

I’ve been summarizing things related to CSS functions recently, the outline of the series

CSS function those things (III) background image function

This is the third in a series of articles and has been produced so far

The project will include the test code in the article, which has been classified accordingly. You are welcome to pay continuous attention. If you are helpful, you can praise it!Project address stamp here