CSS 繼承 inherit屬性的方法

給定一張有如下背景圖的 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)真的是方便,解題如下:
不過(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)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
css中filter屬性和backdrop-filter的應(yīng)用與區(qū)別詳解
這篇文章主要介紹了css中filter屬性和backdrop-filter的應(yīng)用與區(qū)別詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面2020-09-14- 這篇文章主要介紹了HTML5中CSS外觀屬性的相關(guān)知識(shí),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,,需要的朋友可以參考下2020-09-10
CSS中簡(jiǎn)寫屬性要注意TRouBLe的順序問(wèn)題(避免踩坑)
這篇文章主要介紹了CSS中簡(jiǎn)寫屬性要注意TRouBLe的順序問(wèn)題(避免踩坑),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參2020-08-10- 這篇文章主要介紹了CSS字體、文本、列表屬性的相關(guān)知識(shí),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-22
- 這篇文章主要介紹了奇妙的 CSS 屬性 MASK,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2020-07-07
利用CSS中的 outline-offset 屬性實(shí)現(xiàn)加號(hào)
這篇文章主要介紹了利用CSS中的 outline-offset 屬性實(shí)現(xiàn)加號(hào),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-17- 這篇文章主要介紹了css一些不常見(jiàn)但很有用的屬性操作大全,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-09-28