CSS背景色透明但内容不透明怎么实现？

在做前端页面的时候，我们会遇到这样的情况，需要背景为半透明状态，但是层里面的内容不需要为透明的状态。有时候我们设置的时候会出现不管内容还是背景同时都成透明了，如何实现背景色透明但内容不透明这个效果？如下图所示的效果

操作方法

  • 01

    我们先来看看不加透明的效果。我是做了两层背景，图片为一个背景，文字下面又添加了一个纯色的背景，我们要做的就是把纯色背景设置成半透明的效果。

  • 02

    方法一：用rgba值设置背景 现在ps里面看下我们的背景颜色的rgb值是多少。然后background:rgba(39,60,125,0.5);前三个数字为我们在ps里面看到的rgb值，最后一个数字是透明的色值，为0-1之间的数值，数字越大，越不透明，0为完全透明，1为完全不透明。 设置之后可以看到，背景色变成了半透明的效果，而我们的文字内容是不透明的。

  • 03

    以上方法用着简单，但是不兼容ie8以下的浏览器。我们需要添加一个IE滤镜就可以解决兼容性问题了。如下图所示，我们需要添加 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F273c7d,endColorstr=#7F273c7d);本来这个是实现渐变效果的，但是我们这里要实现半透明效果，所以两个颜色设置成一样的了。就是startColor和endColor的值。这两个值是有两部分组成的，前两个值代表了不透明度(换成了16进制的数值)如下图所示为其对应的值。这样设置了以后就兼容ie8以下的浏览器了。

  • 04

    方法二：定位法 设置文字内容和背景内容不在一个层上。让文字内容浮动到半透明的背景层上。如果你的文字在半透明背景层的下面，要设置z-index的值让文字位于背景的上面就行了。

  • 05

    以上就是两种设置背景为半透明，内容不透明的两种方法了。如果你需要考虑浏览器兼容性的话就选择第二个方法，如果完全放弃了ie浏览器，就可以大胆的用第一种方法了。

赞 (0)

相关推荐

  • 百度钱包透明小金库怎么用 透明小金库功能介绍

    百度钱包透明小金库怎么用 透明小金库功能介绍 在进入“小金库”首页后，点击“开启金库”，就可以创建属于自己的个性十足的小金库了。 首先，输入金库名称、最低转账金额和活动说明三项内容，即可创建成功; 然 ...

  • 手机QQ如何弄透明头像？QQ透明头像设置方法

    QQ头像透明怎么弄,如何设置透明的QQ头像,想必对大家来说很想了解这方面的内容,下面小编给大家分享一下,希望可以帮助到大家. 获取QQ头像透明 01 打开微信,关注公众号Barsoft. 02 在公众 ...

  • iphone4透明,IOS5.0.1透明状态栏美化+滑块透明教程

    废话就不多说了，直接进入IOS5.0.1透明状态栏美化+滑块透明主题 1：透明状态栏，先上图,看的上你再动手哈。 用ifunbox或者itools打开：/System/Library/Framewor ...

  • 微信怎么设置透明头像 绝版微信透明头像设置教程

    还记得当年火爆至极的QQ透明头像么、亲，可到如今已成绝版。时至今日，华夏联盟将再次独家首发高大上的微信透明头像上传教程，绝对让你威武霸气没商量，个性狂拽炫到没朋友…好嘞，废话少说，小伙伴们火速围观哈~ ...

  • 用ps将非透明图片转换成透明图片

    在ps中可以将非透明图片转换为透明图片,有些朋友可能不知道如何操作.下面就来看看如何用ps将非透明图片转换成透明图片. 操作方法 01 打开电脑中的ps软件,需要先把电脑中的图片在ps中打开.点击软件 ...

  • div+css如何实现背景图半透明文字内容不透明？

    在进行div+css进行页面处理的时候会出现很多问题,特别是在使用背景色的时候,如果图片背景颜色太深不适合做背景.本文从对背景图片进行半透明处理,讲一下css的作用. 操作方法 01 我们这里主要是为 ...

  • 怎样去掉图片的背景色，将它变为透明？

    我们在编辑网站或制作PPT演示文稿时,常要插入一些图片,当在设置好的背景上再插入图片时,图片自带的背景色会让视觉效果大打折扣,遇到这样的情况我们该如何处理呢? 操作方法 01 打开Photopshop ...

  • ppt怎么快速去掉图片背景色? ppt图片背景变透明的教程

    ppt中可以简单的处理图片,该怎么让图片的背景变透明呢?下面我们就来看看详细的教程. 1.本人用的是2016版本的PowerPoint,在此演示给大家.如图所示,我们需要将校徽插入这个圆形中 2.按一 ...

  • 微信头像怎么弄成透明的（微信透明头像和空白网名怎么弄）

    微信头像怎么弄成透明的（微信透明头像和空白网名怎么弄）

    有很多朋友好奇如何设置透明头像和昵称,表示不允许我们读者居然不会这么简单的技巧,先分享为敬!透明头像的设置从娃娃抓起常规的头像设置很简单,在「我」页面中点击资料栏就进入了「个人信息」页面,点击「头像」 ...