您正在使用 IPV4 [34.204.198.73] 访问本站,您本次已经查看了 1 页
用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
悟空收录网       [公益]保护绿色环境,构建和谐社会      

【腾讯云】2核2G4M云服务器新老同享99元/年,续费同价      
[公益] 地球是我家,绿化靠大家      
2024年 七夕节 025
2025年 高 考 326
2025年 元 旦 169
2025年 春 节 197
 
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
CSS中背景图片透明度问题小结
内容摘要: 1.背景毛玻璃效果通过伪类选择器before为背景添加透明效果,文字使用的仍时添加效果前的样式.demo1{width:500px;height:300px;line-height:50px;text-align:center;}.demo1:before{background:url(http://csssecrets.io/images/tiger.jp......
1.背景毛玻璃效果

通过伪类选择器before为背景添加透明效果,文字使用的仍时添加效果前的样式

.demo1{

width:500px;

height:300px;

line-height:50px;

text-align:center;

}

.demo1:before{

background:url(http://csssecrets.io/images/tiger.jpg)no-repeat;

background-size:cover;

width:500px;

height:300px;

content:"";

position:absolute;

top:0;

left:0;

z-index:-1;/*-1可以当背景*/

-webkit-filter:blur(3px);

filter:blur(3px);

}

2.背景半透明效果

此方法通过在文字所在的div上面设置透明度,不改变背景的透明度

当两个盒子重叠时,就会实现下面图片的效果

.demo2-bg{

background:url("img/htbg1.jpg")no-repeat;

background-size:cover;

width:500px;

height:300px;

position:relative;

}

.demo2{

position:absolute;

left:0;

right:0;

top:0;

bottom:0;

width:500px;

height:300px;

line-height:50px;

text-align:center;

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

}

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:css特效 - 按钮hover文字上下滑动

 

下一篇:window.open()各参数示例详解

发布日期:2024/6/29
手机扫二维码直达本页
发布时间:21:52:17
点  击:7
录  入:壹家怡园
相关文章
Baidu
YiJiaCMS 7.5.1 build240527(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,速盾网络提供加速防护
运行时间载入中.....