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

第一种方法：背景图+定位+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. hadoop集群中删除原有jdk设置

    普通用户: sudo rpm -e --nodeps java-1.6.0-openjdk-1.6.0.0-1.50.1.11.5.el6_3.x86_64 tzdata-java-2012j-1.e ...

  2. vue视频学习笔记06

    video 6 vue动画vue路由--------------------------------------transition 之前 属性<p transition="fade& ...

  3. VS2013各版本激活密钥

    Visual Studio Ultimate 2013 KEY(密钥):BWG7X-J98B3-W34RT-33B3R-JVYW9 Visual Studio Premium 2013 KEY(密钥) ...

  4. .NET中webservice如何使用，调用

    webservice 只是"面向服务"编程的一种方式,现在把所有的方式都合在一起,就叫做WCF,,,,,, 1.创建 webservice服务,在web项目中添加"web ...

  5. 关于SESSION失效和关闭浏览器问题

    关闭浏览器和session失效没有任何关系, session本身有一个存活时间,在tomcat中默认的是30分钟, 这也就是楼上说的不是马上失效   但和浏览器不要划等号 因为即使你浏览器一直开着,如 ...

  6. [asp.net mvc 奇淫巧技] 02 - 巧用Razor引擎在Action内生成Html代码

    在web开发中经常会遇到在内部代码中获取Html,这些Html是需要和数据进行一起渲染.并不是直接把Html代码返回给客户端.这样的做法有很多应用场景,例如分页.Ajax一次性获取几段Html片段.生 ...

  7. Managing Spark data handles in R

    When working with big data with R (say, using Spark and sparklyr) we have found it very convenient t ...

  8. （数字IC）低功耗设计入门（七）——门级电路低功耗设计优化（续）

    前面讲解了门级功耗的优化方法,包括静动态和总体的功耗.现在来记录一下门级层次(有点书也说是在系统级)常用的一种低功耗方法--电源门控. ①电源门控概述与原理 电源门控是指芯片中某个区域的供电电源被关掉 ...

  9. 编写原生Node.js模块

    导语:当Javascript的性能需要优化,或者需要增强Javascript能力的时候,就需要依赖native模块来实现了. 应用场景 日常工作中,我们经常需要将原生的Node.js模块做为依赖并在项 ...

  10. 浅谈Fastfds+nginx结合_单机

    一.环境 centos6.8 x64  IP:192.168.134.128 所需软件包: libfastcommon-1.0.7.zip,FastDFS_v5.05.tar.gz,nginx-1.7 ...