css怎么可以只让背景透明 文字不透明

 我来答
做一个快乐的茶农
高粉答主

2019-09-03 · 每个回答都超有意思的
知道答主
回答量:1396
采纳率:100%
帮助的人:34.8万
展开全部

1、首先新建一个html文件,添加一个DIV,设置宽度和高度,以及背景色填充为红色。

2、然后在父级DIV中插入一个子DIV,定义它的宽高,以及背景色(background:#fff;)。

3、然后添加一个透明度的代码(opacity:0.6),保存后预览下效果,背景已经实现透明了,但是文字也透明了。

4、熟悉PS的同学应该都知道,在图层的上方,有个不透明度,把PS中图层不透明度设置为60%,就和网页中的效果一样了,他们是一个数值。

5、把刚才的背景色和不透明度代码删除,换个代码【background-color:rgba(255,255,255,0.6);】。

6、保存后看下效果,已经变成了背景透明,文字不透明啦。

7、其中255,255,255就是PS中的拾色器里的数值啦。

8、0.6同第一种方式是一个含义。

爽朗的许选
推荐于2017-08-08 · TA获得超过181个赞
知道小有建树答主
回答量:101
采纳率:75%
帮助的人:22.7万
展开全部

背景使用rgba的方式,然后使用滤镜兼容一些令人反感的浏览器,比如IE

<html>

<head>

<title>rgba的兼容样式</title>

<style type="text/css" rel="stylesheet">

* { margin:0px;padding:0px;border:0px;font-family:'Microsoft YaHei','PingFang SC';font-size:12px;color:#333;}

.d_rgba { width:200px;height:200px;color:#fff;background-color:rgba(0,0,0,0.3);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000,endColorstr=#4c000000);}

</style>

</head>

<body>

<div class="d_rgba">

这个过程中需要考虑到div中的元素的透明度不能改变

</div>

<p>

//一般的高级浏览器都支持

background: rgba(255,255,255,0.1);

</p>

<p>

//IE8下

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000,endColorstr=#4c000000);

</p>

<p>

第二句话的意思就是当上一行的透明度不起作用的时候执行。这句话的意思本来是用来做渐变的。但是这个地方不需要渐变。所以两个颜色都设置成了相同的颜色。

这个颜色“#19ffffff”是由两部分组成的。

第一部是#号后面的19 。是rgba透明度0.1的IEfilter值。从0.1到0.9每个数字对应一个IEfilter值。对应关系如运行截图所示。

第二部分是19后面的六位 。这个是六进制的颜色值。要跟rgb函数中的取值相同。比如rgb(255,255,255)对应#ffffff;就是白色。

</p>

</body>

</html>

这是对应的值

本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
百度网友5b2d7dc
2017-08-08 · 知道合伙人软件行家
百度网友5b2d7dc
知道合伙人软件行家
采纳数:46 获赞数:198
福建省中秀网络科技有限公司核心技术工程师

向TA提问 私信TA
展开全部
background:rgba(255,255,255,0.7)
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
网海1书生
科技发烧友

推荐于2017-08-06 · 擅长软件设计、WEB应用开发、小程序
网海1书生
采纳数:12311 获赞数:26228

向TA提问 私信TA
展开全部

如果背景是单色的,可不用css的透明属性(即opacity),而是使用透明色(利用rgba函数),比如:

<div style="background-color:rgba(255,255,255,0.5)">背景是透明度0.5的红色,文字不透明</div>

如果背景是图片,则可以把背景和文字分别做成两个兄弟关系(而不是父子关系)的层,然后把背景层做成透明,再把文字层覆盖在背景层上即可,比如:

<div style="position:relative">
    <div style="position:absolute; background:url(图片网址自己改) no-repeat; height:40px; width:300px; opacity:0.5"></div>
    <div style="position:absolute">背景是透明度0.5的图片,文字不透明</div>
</div>
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
abcd5849049
2014-10-15 · TA获得超过135个赞
知道小有建树答主
回答量:252
采纳率:0%
帮助的人:166万
展开全部
这个只能把文字放在透明的标签之外,然后定位,漂浮在透明层的上面
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(7)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式