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

第一种方法：背景图+定位+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. 用Python设计一个经典小游戏

    这是关于Python的第9篇文章,介绍如何用Python设计一个经典小游戏:猜大小. 在这个游戏中,将用到前面我介绍过的所有内容:变量的使用.参数传递.函数设计.条件控制和循环等,做个整体的总结和复习 ...

  2. 路由-when-resolve

    文件列表:luyou.html,app.js,home.html,user.html,wy.json luyou.html <!DOCTYPE html> <html ng-app= ...

  3. 通过winform+模拟登录实现快速一键登录到人才招聘网站

    之前为了便于人事部门招聘登录网站更简洁高效,免去每天频繁输网址.用户名.密码等相关登录信息,特基于winform+HttpWebRequest实现模拟请求登录,最终达到一键登录到招聘网站后台的效果. ...

  4. swift pod第三方OC库使用use_frameworks!导致#import提示无法找到头文件

    以MBProgressHUD为例子 swift中Podfile文件一般都会加上use_frameworks! 这样就可以直接通过import MBProgressHUD来访问MBProgressHUD ...

  5. javaWeb学习总结（8）- JSP属性范围(5)

    所谓的属性范围就是一个属性设置之后,可以经过多少个其他页面后仍然可以访问的保存范围. 一.JSP属性范围 JSP中提供了四种属性范围,四种属性范围分别指以下四种: 当前页:一个属性只能在一个页面中取得 ...

  6. 【Netty】WebSocket

    一.前言 前面学习了codec和ChannelHandler之间的关系,接着学习WebSocket. 二.WebSocket 2.1. WebSocket介绍 WebSocket协议允许客户端和服务器 ...

  7. VR全景智慧城市—城市就在你眼前

    "春风十里,不如有你",不知不觉间,身边的人已对VR不再陌生,VR眼镜的热销,VR体验店的火爆,VR游戏的向往等等.可见VR就是为生活而诞生! 2015年被称作VR行业的产业元年, ...

  8. 错误处理1： D:\a1-C++\C++作业\第五次1.cpp undefined reference to `vtable for Shape'

    在编译程序的时候遇到此误,在google上查,很多地方都说是因为虚基类里面的虚拟析构函数没有提供实现导致的.但是我的已经提供了实现,也不行.最后发现是其他没有提供实现的虚函数造成的.所以,在一个虚基类 ...

  9. 刨根究底字符编码之十一——UTF-8编码方式与字节序标记

    UTF-8编码方式与字节序标记 一.UTF-8编码方式 1. 接下来将分别介绍Unicode字符集的三种编码方式:UTF-8.UTF-16.UTF-32.这里先介绍应用最为广泛的UTF-8. 为满足基 ...

  10. 30多个Android 开发者工具 带你开发带你飞

    文中部分工具是收费的,但是绝大多数都是免费的. FlowUp 这是一个帮助你跟踪app整体性能的工具,深入分析关键的性能数据如FPS, 内存, CPU, 磁盘, 等等.FlowUp根据用户数量收费. ...