需要写兼容写法:

-webkit-box-reflect:below 3px -webkit-(repeating)linear/redial-gradient(...);

1.先写direction定义方向:

above:倒映在其对象的上边

below:倒映在其对象的下边

left:左边

right:右边

2.offset定义对象与倒影的距离,默认为0,取值包括px和百分比,百分比是根据对象的大小进行确定。px和百分比都可为负值。

<offset>

  • <length>:

    用长度值来定义倒影与对象之间的间隔。可以为负值

  • <percentage>:

    用百分比来定义倒影与对象之间的间隔。可以为负值

3.mask-box-images定义

<mask-box-image>

  • none:

    无遮罩图像

  • <url>:

    使用绝对或相对地址指定遮罩图像。

  • <linear-gradient>:

    使用线性渐变创建遮罩图像。

  • <radial-gradient>:

    使用径向(放射性)渐变创建遮罩图像。

  • <repeating-linear-gradient>:

    使用重复的线性渐变创建背遮罩像。

  • <repeating-radial-gradient>:

    使用重复的径向(放射性)渐变创建遮罩图像。

倒影box-reflect(可图片可文字)的更多相关文章

  1. PHP生成小程序二维码合成图片生成文字

    这部分代码是写在项目上的代码,THINKPHP3.1如果迁移到其他的地方应该要稍稍改动一下以适合自己的项目 function get_bbox($text,$fsize,$ffile){ return ...

  2. php给图片添加文字水印方法汇总

    在php中要给图片加水印我们需要给php安装GD库了,这里我们不介绍GD库安装,只介绍怎么利用php给图片添加文字水印的4种方法的汇总.有需要的小伙伴可以参考下. 1: 面向过程的编写方法 1 2 3 ...

  3. 鼠标滑过图片变暗文字链接滑出jQuery特效

    效果体验:http://hovertree.com/texiao/jquery/7.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...

  4. ios图片添加文字或者水印

    在项目中,我们会对图片做一些处理,但是我们要记住,一般在客户端做图片处理的数量不宜太多,因为受设备性能的限制,如果批量的处理图片,将会带来交互体验性上的一些问题.首先让我们来看看在图片上添加文字的方法 ...

  5. iOS开发小技巧--即时通讯项目:使用富文本在UILabel中显示图片和文字;使用富文本占位显示图片

    Label借助富文本显示图片 1.即时通讯项目中语音消息UI的实现,样式如图: 借助富文本在UILabel中显示图片和文字 // 1.创建一个可变的富文本 NSMutableAttributedStr ...

  6. php 图片添加文字水印 以及 图片合成(微信快码传播)

    1.图片添加文字水印: $bigImgPath = 'backgroud.png'; $img = imagecreatefromstring(file_get_contents($bigImgPat ...

  7. 自定义带图片和文字的ImageTextButton

    今天我们来讲一下有关自定义控件的问题,今天讲的这篇是从布局自定义开始的,难度不大,一看就明白,估计有的同学或者开发者看了说,这种方式多此一举,但是小编我不这么认为,多一种解决方式,就多一种举一反三的学 ...

  8. ArcGIS API for Silverlight之配准JPG图片地图文字倾斜解决方案

    原文:ArcGIS API for Silverlight之配准JPG图片地图文字倾斜解决方案 根据实际JPG图片进行配准后,发布的地图,利用ArcGIS API for Silverlight在网页 ...

  9. [CSS]图片与文字对齐问题

    摘自:张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 图片与文字默认是居底对齐了.所以当图片与文字在一起的时候往往都是不对齐的.尤其图片较小时就更加明显了,我看到很多人使 ...

  10. 如何利用CSS代码使图片和文字在同一行显示且对齐

    对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同 ...

随机推荐

  1. 《和莎莫的 500 天》中为什么 Summer 最终没有和 Tom 在一起?

    好的电影总是需要仔细赏味几次,每次也都会有不同的收获.就像我钟爱的[500 days of summer]. 彪悍的大胡子导演MarcWebb实在是太有趣,把自己的亲身经历搬上大荧幕,因为" ...

  2. android使用giflib加载gif

    转载请标明出处:https:////www.cnblogs.com/tangZH/p/12356915.html 背景不多说,反正ndk加载gif比java上加载gif好很多很多,主要体现在内存占用与 ...

  3. HDU——算法练习1000 1089-1096

    全篇都是讲数字之间的运算的: 由上自下难度逐渐升级 ,没耐心者建议一拉到底: 1000: Problem Description Calculate A + B.   Input Each line ...

  4. FPGA小白学习之路(4)PLL中的locked信号解析(转)

    ALTPLL中的areset,locked的使用 转自:http://www.360doc.com/content/13/0509/20/9072830_284220258.shtml 今天对PLL中 ...

  5. C#中使用 正则表达式 替换img中src路径但保留图片名

    text = Regex.Replace(text, @"(?i)(?<=<img\b[^>]*?src=\s*(['""]?))([^'"& ...

  6. ASP.NET CORE 启动过程及源码解读

    在这个特殊的春节,大家想必都在家出不了们,远看已经到了回城里上班的日子,但是因为一只蝙蝠的原因导致我们无法回到工作岗位,大家可能有的在家远程办公,有些在家躺着看书,有的是在家打游戏:在这个特殊无聊的日 ...

  7. 【Spring Data 系列学习】Spring Data JPA 基础查询

    [Spring Data 系列学习]Spring Data JPA 基础查询 前面的章节简单讲解了 了解 Spring Data JPA . Jpa 和 Hibernate,本章节开始通过案例上手 S ...

  8. 前端每日实战:39# 视频演示如何用纯 CSS 创作一个表达怀念童年心情的条纹彩虹心特效

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/QxbmxJ 可交互视频教程 此视频 ...

  9. 在AX中解析多层的json信息

        str jsonstr ='{"FieldValues":[{"FieldName":"Field1","FieldVal ...

  10. Redis06——Redis到底能用在什么地方(上)

    之前我们介绍了一些列关于Redis的数据结构.持久化.过期&淘汰策略.集群化等知识点,感兴趣的小伙伴可以在文章的末尾查看往期内容.今天将为大家带来Redis的应用.由于本篇文章较长,所以将拆分 ...