Method of CSS inheriting inherit attribute

Time:2021-5-6

Given a div with the following background image:

Make the following reflection effect:

There are many ways, but of course we need to find the fastest and most convenient way, at least no matter how the picture changes,divNo matter how the size changes, we don’t have to change our code.

Method 1: – WebKit box reflect

This is a very new CSS attribute. It is very easy to use and can reflect our content from all directions. However, the compatibility is too poor:

Basically, only browsers with WebKit kernel support it.

But it’s really convenient to use

But it’s really convenient to use


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

box-reflectThere are four directions to choose from,below | above | left | rightThe representatives are up and down, left and right. More specifically, we can have a look  MDN

Method 2: inherit, use inheritance

This problem is mainly to introduce this method, good compatibility.

inheritWhat is it? The overview of each CSS attribute definition indicates whether the attribute is inherited by default (“inherited: Yes”) or not (“inherited: No”). This determines how the value is calculated when you do not specify a value for an element’s attribute.

Flexible useinheritInheriting the parent value can solve many seemingly complex problems. For this problem, we add a pseudo element to the image container, using the  background-image:inheritBy inheriting the background value of the parent value, our CSS code does not need to be changed no matter how the image changes


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

summary

So far, this article about the method of CSS inheriting inherit property is introduced here. For more related CSS inheriting inherit content, please search previous articles of developer or continue to browse the following related articles. I hope you can support developer more in the future!

Recommended Today

Why is reids fast

1. What is redis? Redis is completely open source and complies with the BSD protocol. It is a high-performance key value database. Redis is also one of the most popular NoSQL databases at present. It contains a variety of data structures, supports network, is memory based, and has an optional key value pair storage database […]