CSS 繼承 inherit屬性的方法

發(fā)布時(shí)間：2020-05-09 17:12:34 作者：佚名

我要評(píng)論

這篇文章主要介紹了CSS 繼承 inherit屬性的方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

給定一張有如下背景圖的 div：

制作如下的倒影效果：

方法很多，但是我們當(dāng)然要尋找最快最便捷的方法，至少得是無(wú)論圖片怎么變化， div 大小怎么變化，我們都不用去改我們的代碼。

法一：-webkit-box-reflect

這是一個(gè)十分新的 CSS 屬性，使用起來(lái)十分簡(jiǎn)單，可以從各個(gè)方向反射我們內(nèi)容。不過(guò)兼容性過(guò)于慘淡：

基本上是只有 -webkit- 內(nèi)核的瀏覽器才支持。

不過(guò)使用起來(lái)真的是方便，解題如下：

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

box-reflect 有四個(gè)方向可以選， below | above | left | right 代表下上左右，更具體的可以看看 MDN 。

法二：inherit，使用繼承

本題主要還是為了介紹這種方法，兼容性好。

inherit 是啥，每個(gè) CSS 屬性定義的概述都指出了這個(gè)屬性是默認(rèn)繼承的 ("Inherited: Yes") 還是默認(rèn)不繼承的 ("Inherited: no")。這決定了當(dāng)你沒(méi)有為元素的屬性指定值時(shí)該如何計(jì)算值。

靈活使用 inherit 繼承父值，可以解決許多看似復(fù)雜的問(wèn)題。對(duì)于本題，我們對(duì)圖片容器添加一個(gè)偽元素，使用 background-image:inherit 繼承父值的背景圖值，就可以做到無(wú)論圖片如何變，我們的 CSS 代碼都無(wú)需改動(dòng)：

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

總結(jié)

到此這篇關(guān)于CSS 繼承 inherit屬性的方法的文章就介紹到這了,更多相關(guān)CSS 繼承 inherit內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！