第一种情况，背景为自定义颜色

直接给父级背景颜色设置background:rgba();就可以了；

<!-- 第一种情况 背景是自定义颜色系列 --><div class="container"><div class="bg"><div class="form"><div class="formItem"><label for="">用户名：</label><input class="input" type="text"></div><div class="formItem"><label for="">密码：</label><input class="input" type="text"></div><div class="formItem"><button class="btn">按钮</button></div></div></div></div>
`````css
/* 第一种情况适用 */
.container {width: 800px;height: 500px;background: url('../img/bg.jpg') no-repeat center;background-size: cover;position: relative;
}.container .bg {position: absolute;right: 50%;top: 50%;width: 200px;height: 200px;margin-top: -100px;margin-right: -100px;border-radius: 4px;overflow: hidden;box-shadow: 10px 10px 5px #888888;background-color: rgba(0, 229, 238, 0.5);
}.container .bg .form {width: 160px;height: 160px;color: #FFFFFF;padding: 20px 20px;
}.container .bg .form .formItem {margin: 10px 0;
}.container .bg .form .formItem .btn {width: 160px;height: 20px;background-color: #0000FF;margin-top: 40px;
}.container .bg .form .formItem .input {width: 160px;border: 0px;
}

效果：

第二种情况，背景为图片

将背景和表单设置成兄弟块，通过定位将两者重合，再将背景用opacity透明化，表单不添加背景即可；

<!-- 第二种情况 图片作为背景 --><div class="container"><div class="bg2"></div><div class="form2"><div class="formItem"><label for="">用户名：</label><input class="input" type="text"></div><div class="formItem"><label for="">密码：</label><input class="input" type="text"></div><div class="formItem"><button class="btn">按钮</button></div></div></div>

/* 第二种情况适用 */
.container .bg2 {position: absolute;/* right: 50%; */right: 5%;top: 50%;width: 200px;height: 200px;margin-top: -100px;/* margin-right: -100px; */border-radius: 4px;overflow: hidden;box-shadow: 10px 10px 5px #888888;background: url('../img/avator-1.jpg') no-repeat center;background-size: cover;opacity: 0.7;
}.container .form2 {position: absolute;/* right: 50%; */right: 5%;top: 50%;width: 160px;height: 160px;margin-top: -100px;/* margin-right: -100px; */color: #000000;padding: 20px 20px;
}.container .form2 .formItem {margin: 10px 0;
}.container .form2 .formItem .btn {width: 160px;height: 20px;background-color: #00ff00;margin-top: 40px;
}.container .form2 .formItem .input {width: 160px;border: 0px;
}

效果：

总结：

opacity:影响内部所有元素的显示问题；
rgba():影响内部文本显示，但不影响内部块显示；

如何实现背景/背景图片透明文字不透明相关推荐

html文本框背景text怎么变透明,css怎么设置背景图片透明文字不透明？
项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果.下面我们来看一下这两种方法的使用. CSS实现背景图片透明,文字不透明效果的两种方法: 方法一(半透明效果) ...
C# 后台背景图片拼接图片与文字，文字图片生成与背景图片合成
标题C# 后台背景图片拼接图片与文字,文字图片生成与背景图片合成最近有个需求是将生成的邀请码与背景图片合成成为新的图片,查找了一些资料后又整理了一遍,查到了一个群主的帖子,虽然代码略微有点问题,地 ...
CSS实现背景图片透明文字不透明效果的两种方法
网页设计中经常要在背景图上放一些文字介绍,这就需要背景图片能有透明效果以便突出显示文字信息,经多方查阅,终于找到了2种有趣的方法. 1.在文字层添加rgba样式实现半透明效果方法: 背景图片层添加样 ...
背景透明文字不透明的最佳方法兼容IE(以背景黑色透明度0.5为例)
以背景黑色,透明度0.5举例为大家详细介绍下关于背景透明,文字不透明的最佳方法同时兼容IE,具体实现如下,感兴趣的朋友可以参考下哈希望对大家有所帮助以背景黑色,透明度0.5举例非IE:backgr ...
css实现背景透明文字不透明
我们所说的设置透明度实际上是设置不透明度使用opacity会导致背景和图片都透明,在此处不合适 <!DOCTYPE html> <html> <head> < ...
生成高清缩略图; 添加图片、文字水印; 图片、文字水印透明
之前写了一个公共的ImgHelper类,主要提供高清晰缩略图生成,由于在之前的实际操作过程中存在一些问题,最近有了点时间,于是重新拾起来再改进一下,顺便研究一下GDI+. 问题一:产品搜索列表展示,每 ...
CDR怎么做透明文字和透明图片、水印
水印是一种数字保护的手段,在图像上添加水印即能证明本人的版权,还能对版权的保护做出贡献.也就是在图片上打上半透明的标记,因其具有透明和阴影的特性,使之不管在较为阴暗或明亮的图片上都能完美使用,嵌入的水 ...
CSS 背景透明文字不透明
background:rgba(12, 7, 7, 0.45);括号里面的前3个值是rgba的颜色值,0.45是透明度,透明度的范围是0~1,0是完全透明, 1是完全不透明.
div背景透明文字不透明
style="width:150px;height:100px;float:left;margin-left:10px;background-color:rgba(255,0,0,0.5); ...

如何实现背景/背景图片透明文字不透明

如何实现背景/背景图片透明文字不透明

第一种情况，背景为自定义颜色

第二种情况，背景为图片

总结：

如何实现背景/背景图片透明文字不透明相关推荐

最新文章

热门文章