CSS inheritance method

Given a div with the following background image:

Create the following reflection effect:

There are many methods, but of course we have to find the fastest and most convenient method, at least no matter how the picture changes or how the div size changes, we don’t have to change our code.

Method 1: -webkit-box-reflect

This is a very new CSS property that is very simple to use and can reflect our content in all directions. However, the compatibility is too bleak:

Basically, only browsers with the -webkit- kernel support it.

But it is really convenient to use. The solution is as follows:

But it is really convenient to use. The solution is as follows:

div{
    -webkit-box-reflect: below;
}

box-reflect has four directions to choose from, below | above | left | right , representing bottom, top, left and right. For more details, please see MDN.

Method 2: inherit, use inheritance

This question is mainly to introduce this method, which has good compatibility.

What is inherit ? The overview of each CSS property definition indicates whether the property is inherited by default ("Inherited: Yes") or not inherited by default ("Inherited: no"). This determines how the value is calculated when you don't specify a value for an element's attribute.

Flexible use of inherit to inherit parent values ​​can solve many seemingly complex problems. For this question, we add a pseudo-element to the image container and use background-image:inherit inherit the background image value of the parent value. This way, no matter how the image changes, our CSS code does not need to be modified:

div:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    bottom: -100%;
    background-image: inherit;
    transform: rotateX(180deg);
}

Summarize

This is the end of this article about the method of inheriting CSS properties. For more relevant CSS inheritance content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!