图片与图片上的文字设置不同的透明度的两种方法：

第一种方法：背景图+定位+background: url(timg.jpg）no-repeat;

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

    .d1 {

        background: url(timg.jpg)no-repeat;

        background-size: cover;

        width: 500px;

        height: 500px;

        position: relative;

    }

    .d2 {

        position: absolute;

        left: 0;

        right: 0;

        top:0;

        bottom: 0;

        width: 500px;

        height: 500px;

        line-height: 50px;

        text-align: center;

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

    }

</style>

</head>

<body>

<div class="d1">

    <div class="d2">我是吴亦凡</div>

</div>

</body>

</html>


效果图一：

第二种方法：背景图+伪类+flite:blur(5px)

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

    .d1 {

        width: 300px;

        height: 300px;

        line-height: 50px;

        text-align: center;

    }

    .d1:before {

        background: url(timg.jpg）no-repeat;

        background-size: cover;

        width: 500px;

        height: 500px;

        content: "";

        position: absolute;

        top: 0;

        left: 0;

        z-index: -1;

        -webkit-filter:blur(5px);

        filter: blur(px);

    }

</style>

</head>

<body>

<div class="d1">我是吴亦凡</div>

</body>

</html>


效果图二：

需要知道的几个属性：

  • background: url(timg.jpg）no-repeat;：将一张图片设置为html的背景图，并且不平铺。如果平铺的话将占满整个网页。
  • background-size: cover;：background-size的cover特定值会保持图像本身的宽高比例，将图片缩放到正好完全覆盖定义背景的区域。
  • z-index: -1;：让一个层在所有层的下面当背景的方法。
  • -webkit-filter:blur(5px);：-webkit-filter，其作用通常是进行图片处理，blur(5px)是对图像进行模糊处理，此处像素为5px。
  • filter: blur(px);用滤镜对文字进行模糊处理。
  • background: rgba(225,225,225,0.3);通过改变最后一个值来设置背景图片的透明度。

html之改变图片透明度而不改变文字的透明度--两种方法实现的更多相关文章

  1. css:图标与文字对齐的两种方法

    (好久没写博客了,这几个月的积累比较零碎,记在本子上,现在开始整理归类) 在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向 ...

  2. CSS图标与文字对齐的两种方法

    在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向对齐为middle, <div> <img src=&q ...

  3. CSS多行文字垂直居中的两种方法

    之前写过一篇关于:CSS左右居中对齐的文章,里面提到的两种方法其实也可以引申为垂直居中对齐.写这篇文章是因为要兼容IE6.IE7的问题,我们都知道一行文字时可以通过line-height来设置垂直居中 ...

  4. java实现图片文字识别的两种方法

    一.使用tesseract-ocr 1.    https://github.com/tesseract-ocr/tesseract/wiki上下载安装包安装和简体中文训练文件 window64位安装 ...

  5. 实现icon和文字垂直居中的两种方法－（vertical-align and line-height）

    方法一:vertical-align 在w3school定义:该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐 百思不得骑姐 然后Google,反正在w3schools上面并没有找到定义 仅 ...

  6. html中如何实现表格移入移出时背景颜色改变？（两种方法）

    html中如何实现表格移入移出时背景颜色改变?(两种方法) 一.总结 1.通过css的table标签的hover属性: 10 #tab:hover{ 11 background: green 12 } ...

  7. [BS-19]更改UITextField的placeholder文字颜色的5种方法

    更改UITextField的placeholder文字颜色的5种方法 想要达到的目标是:一个页面上有多个UITextField,当用户聚焦某textField时,该文本框的placeholder的文字 ...

  8. IE下实现类似CSS3 text-shadow文字阴影的几种方法

    IE下实现类似CSS3 text-shadow文字阴影的几种方法 一.开始的擦边话 为了测试IE9浏览器,下午晃晃荡荡把系统换成window7的了.果然,正如网上所传言的一样,IE9浏览器确实不支持C ...

  9. php如何防止图片盗用/盗链的两种方法(转)

    图片防盗链有什么用? 防止其它网站盗用你的图片,浪费你宝贵的流量.本文章向大家介绍php防止图片盗用/盗链的两种方法 Apache图片重定向方法 设置images目录不充许http访问 Apache服 ...

随机推荐

  1. background新增的N个强悍功能！！！

    background在CSS3中新增样式: [ ] 首先我们先回顾下background的原有样式: background-color 背景颜色 相关属性值: 关键字:red,blue,yellow等 ...

  2. 通过分析 JDK 源代码研究 TreeMap 红黑树算法实

    TreeMap和TreeSet是Java Collection Framework的两个重要成员,其中TreeMap是Map接口的常用实现类,而TreeSet是Set接口的常用实现类.虽然HashMa ...

  3. HDFS 架构简述

    HDFS 架构简述 Hadoop分布式文件系统(HDFS)是一个分布式的文件系统,运行在廉价的硬件上.它与现有的分布式文件系统有很多相似之处.然而与其他的分布式文件系统的差异也是显着的.HDFS是高容 ...

  4. php实现批量修改文件名称

    场景叙述:比如我要将D:\WWW\img\Gastroenterology这个文件夹下图片要重新命名成1.jpg,2.jpg.......这样的有规律名字, 如下图: 那么我们就可以利用php的ren ...

  5. DelayQueue使用

    假设现有如下的使用场景: a) 关闭空闲连接.服务器中,有很多客户端的连接,空闲一段时间之后需要关闭之. b) 缓存.缓存中的对象,超过了空闲时间,需要从缓存中移出. c) 任务超时处理.在网络协议滑 ...

  6. 关于php内存释放问题 内存溢出问题（二）

    今天抽了一上午时间,来看了看之前解决过内存问题的代码,相对来说,我对自己代码的优化程序非常不满意,一次性导入四万条数据就使代码变得如此繁琐,我想这不是根本的解决方法.通过网上检索,对问题有进一步的分析 ...

  7. 面向对象（java菜鸟的课堂笔记）

    类:相同的东西放在一起 分为属性和动作: 把一组或多组事物相同的特性的描述==>类   属性和动作被称为成员: //声明类的属性信息 public class **{ String name: ...

  8. sublime 新手代码提示

    有提示的    你按   table   试试这就是按过的结果   是不是很方便这是按后的效果      是不是很方便 下面是各种简写效果html <html></html> ...

  9. 《物联网框架ServerSuperIO教程》-21.终端控制传感器或设备，形成回路控制。附：demo源代码

    21.1     概述 ServerSuperIO以前所做的工作逐步为形成回路控制或级联控制打下基础,例如:服务连接器和设备驱动连接器的开发与应用.总之,是通过多种形式下发命令控制设备(驱动)或传感器 ...

  10. 实现Runnable接口和继承Thread类之间的区别

    在Java语言中,我们都知道,有两种创建线程的方式,一中是使用Runnable接口,另一种是使用Thread类. public class DemoRunnable implements Runnab ...