热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

CSS3如何为背景图设置遮罩并解决遮罩样式继承问题

这篇文章主要介绍了CSS3如何为背景图设置遮罩并解决遮罩样式继承问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大

这篇文章主要介绍了CSS3如何为背景图设置遮罩并解决遮罩样式继承问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

工作中很多时候需要对图片背景作处理,比如设置通透性,模糊处理等等

CSS3如何为背景图设置遮罩并解决遮罩样式继承问题

但是如果对背景图所在标签直接设置这些效果的话,这些样式会被子标签继承。

CSS3如何为背景图设置遮罩并解决遮罩样式继承问题

例1: 给背景所在标签设置模糊效果,影响到了子标签内的文字

   

    
        Hello

    

解决方法:

为父标签中添加一个标签,令其绝对定位并铺满父标签,将背景 / 样式设置在该标签内。

   
    
    
        
        Hello

    

CSS3如何为背景图设置遮罩并解决遮罩样式继承问题

感谢你能够认真阅读完这篇文章,希望小编分享的“CSS3如何为背景图设置遮罩并解决遮罩样式继承问题”这篇文章对大家有帮助,同时也希望大家多多支持编程笔记,关注编程笔记行业资讯频道,更多相关知识等着你来学习!


推荐阅读
author-avatar
詹姵慧3482
这个家伙很懒,什么也没留下!
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有