这篇文章主要介绍css的inherit继承属性的内容，对大家学习和理解inherit继承属性有一定的帮助，感兴趣的朋友可以参考，希望大家阅读完这篇文章能有所收获，接下来小编带着大家一起了解看看。

    给定一张有如下背景图的 div：

    制作如下的倒影效果：

    方法很多，但是我们当然要寻找最快最便捷的方法，至少得是无论图片怎么变化， div 大小怎么变化，我们都不用去改我们的代码。

    法一：-webkit-box-reflect

    这是一个十分新的 CSS 属性，使用起来十分简单，可以从各个方向反射我们内容。不过兼容性过于惨淡：

    基本上是只有 -webkit- 内核的浏览器才支持。

    不过使用起来真的是方便，解题如下：

    不过使用起来真的是方便，解题如下：

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

    box-reflect 有四个方向可以选， below | above | left | right 代表下上左右，更具体的可以看看  MDN 。

    法二：inherit，使用继承

    本题主要还是为了介绍这种方法，兼容性好。

    inherit 是啥，每个 CSS 属性定义的概述都指出了这个属性是默认继承的 ("Inherited: Yes") 还是默认不继承的 ("Inherited: no")。这决定了当你没有为元素的属性指定值时该如何计算值。

    灵活使用 inherit 继承父值，可以解决许多看似复杂的问题。对于本题，我们对图片容器添加一个伪元素，使用  background-image:inherit 继承父值的背景图值，就可以做到无论图片如何变，我们的 CSS 代码都无需改动：

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

    总结

    以上就是关于css的inherit继承属性的内容，上述示例具有一定的借鉴价值，希望对大家学习inherit继承属性有帮助，想要了解更多大家可以继续浏览群英网络其他相关的文章。

文本转载自脚本之家

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 用css做模糊背景有几种效果？怎样实现？

  今天给大家分享的是CSS实现模糊背景的效果，一般来说模糊背景的效果有普通的背景模糊，局部模糊和局部清晰这几种效果，那么这些效果是如何实现的呢？感兴趣的朋友接下来跟随小编一起看看吧。

• HTML表格嵌套有什么用，怎样制作表格嵌套

  小编今天带大家来了解了解下关于HTML表格标记入门知识之表格嵌套的详细内容，有需要这方面内容的小伙伴可以看看小编所整理的资料，一定不要错过了。

• 详解css3中 text-fill-color属性

  text-fill-color单单从字面上来看就是“文本填充颜色”,不过它实际也是设置对象中文字的填充颜色，和color的效果很相似.这篇文章主要介绍了css3 text-fill-color属性 ,需要的朋友可以参考下

• 用CSS3怎样做线性渐变背景的效果？

  这篇文章给大家分享的是用CSS3怎样做线性渐变背景的效果。小编觉得挺实用的，因此分享给大家做个参考，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

• CSS简写属性会覆盖其他样式吗，简写值的顺序是什么

  简写属性是用于同时给多个属性赋值的属性。比如font是一个简写属性，可以用于设置多种字体属性。它指定了font-style、font-weight、font-size、font-height以及font-family。