html

<div class="parent">
<div class="translucent">I am Bob</div>
</div>

css

.parent{
position: relative;
background:url('1.jpg');
width :400px;
height:300px;
}
.translucent{
width: 300px;
height: 200px;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background: white;
border: 10px solid rgba(255, 255, 255, 0.77);
background-clip: padding-box;
}

效果图

background-clip的用法详见https://www.w3cplus.com/content/css3-background-clip

css半透明边框的更多相关文章

  1. [css 揭秘]:CSS揭秘 技巧(一):半透明边框

    我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在上面哦 喜欢的给我一个星吧 半透明边框 css 中的半透明颜色,比如用 rgba() 和 h ...

  2. css rgba/hsla知识点讲解及半透明边框

    一.RGBA(R,G,B,A) 参数: R:红色值.正整数 | |百分数 G:绿色值.正整数 | |百分数 B:蓝色值.正整数 | |百分数 A:Alpha透明度.取值0~1之间. 说明:此色彩模式与 ...

  3. CSS揭秘-半透明边框与多重边框

    场景一: 实现半透明边框: 由于CSS样式的默认行为,背景色的渲染范围是 content+padding+border. 半透明边框被主调色影响, 实现的效果为   解决方案: 使用backgroun ...

  4. 半透明边框与background-clip

    在开始本章之前,我们要先简单介绍CSS中的半透明颜色.自2009年后,网页工作者们开始使用半透明颜色,如rgba().hsla().前者相信大家都很熟悉,不难理解其中将有四个参数,第四个参数则为透明度 ...

  5. CSS发光边框文本框效果

    7,166 次阅读 ‹ NSH Blog 网页设计 CSS发光边框文本框效果 或许你看过Safari浏览器下,任何输入框都会有一个发光的蓝色边框,这不单纯只是蓝色边框而已,其实包含了许多CSS3技巧知 ...

  6. CSS border边框属性教程(color style)

    CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇 一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色. ...

  7. HTML&CSS基础-边框简写属性

    HTML&CSS基础-边框简写属性 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html> ...

  8. css圆角边框

    一.CSS3圆角的优点 传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点: * 减少维护的工作量.图片文件的生成.更新. ...

  9. CSS之边框覆盖

    今天想做一个淘宝导航来练练手,遇到了边框覆盖的问题.如下图: li的红色边框盖不住该灰色边框.后来问经验人士告诉我,这种边框覆盖是会出现无法100%保证正常的情况,遂得到如下3中解决方案: 1.以后遇 ...

随机推荐

  1. webrtc视频数据render流程

  2. 为开源社区尽一份力,翻译RocketMQ官方文档

    正如在上一篇文章中写道:"据我所知,现在RocketMQ还没有中文文档.我打算自己试着在github上开一个项目,自行翻译."我这几天抽空翻译了文档的前3个小节,发现翻译真的不是一 ...

  3. jdk7jdk8新特性概述

    在oracle停止对jdk6更新,jdk8发布之后,公司终于要把生产环境更新到jdk7,下面列一下jdk7,8的可能需要关注的新特性. jdk7 G1垃圾回收 fork-join框架 二进制变量 Sw ...

  4. 二分PkU3258

    <span style="color:#330099;">/* E - 二分 Time Limit:2000MS Memory Limit:65536KB 64bit ...

  5. 基于C++11的线程池

    1.封装的线程对象 class task : public std::tr1::enable_shared_from_this<task> { public: task():exit_(f ...

  6. Java泛型深入理解

    泛型的优点: 泛型的主要优点就是让编译器保留參数的类型信息,执行类型检查,执行类型转换(casting)操作,编译器保证了这些类型转换(casting)的绝对无误. /******* 不使用泛型类型 ...

  7. Linux转发性能评估与优化(转发瓶颈分析与解决方式)

    线速问题 非常多人对这个线速概念存在误解. 觉得所谓线速能力就是路由器/交换机就像一根网线一样. 而这,是不可能的.应该考虑到的一个概念就是延迟. 数据包进入路由器或者交换机,存在一个核心延迟操作,这 ...

  8. 前端优化之动画为什么要尽量用css3代替js

    导致JavaScript效率低的两大原因:操作DOM和使用页面动画.通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果,导致js效率低的两个因素都包括在内了在频繁的操作DOM和CSS时,浏 ...

  9. 超详细的 Linux CentOS yum 源的配置与使用【转发+新增】

    一.yum 简介 yum,是Yellow dog Updater, Modified 的简称,是杜克大学为了提高RPM 软件包安装性而开发的一种软件包管理器.起初是由yellow dog 这一发行版的 ...

  10. 大数据学习(6)MapReduce应用

    倒排索引 /** * * * <pre> *file1.txt: *hello ketty *hello tomcat * *file2.txt: *hello hadoop * *map ...