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

第一种方法：背景图+定位+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. 拖拽系列一、JavaScript实现简单的拖拽效果

        前端拖拽相关应用汇总 在现实生活中就像男孩子牵着(拖着)女朋友的手穿过马路:从马路的一端走到另一端这种场景很常见: 而在前端开发中拖拽效果也算是前端开发中应用最常见.最普遍的特效:其拖拽涉及知 ...

  2. OC—不可变字符串NSString

  3. 腾讯云万象优图每个账户提供50G的图片存储（支持黄图检测）

    文章由GIT博客迁移过来 程序下载地址(源码也在):点我下载 设计说明 10月20号晚上,准备写这么一个程序. 腾讯云万象优图每个账户提供50G的图片存储(支持黄图检测) 可以在截图之后,直接点击上传 ...

  4. 从 art-template 模版维护到动态加载的思考

    自己用 art-template 有些年头了,最近在培养团队学习 art-template 使用,发现有一个痛点比较难解决. 比如有一个模版,我们可以直接写在页面中,像这样: <script i ...

  5. struts2.1.6教程六、使用标签

    1.基础表单标签 准备工作:建立struts2tag项目,搭建好struts2的开发环境.在html我们常用的基础表单标签主要有文本域.密码域.提交.重置四种.它们在strust2中可以通过标签来生成 ...

  6. 配置你的Editor

    ![](http://oqefp0r4y.bkt.clouddn.com/editor_index.png) ### 说明1. 走一波配置流,莫等闲,高效快速开发,从自己的常用的工具开始2. 寻找舒适 ...

  7. C# MVC权限验证

    前言 之前一直没怎么接触过权限验证这块,刚好公司老平台改版,就有了这篇权限验证.此篇文章大致讲解下 精确到按钮级别的验证如何实现.以及权限验证设计的参考思路(菜鸟一枚,大神勿喷). 在开发大项目的时候 ...

  8. Unsupervised Learning and Text Mining of Emotion Terms Using R

    Unsupervised learning refers to data science approaches that involve learning without a prior knowle ...

  9. kafka 0.10.2 消息生产者

    package cn.xiaojf.kafka.producer; import org.apache.kafka.clients.producer.KafkaProducer; import org ...

  10. jQuery总结---版本一

    day01--- jQuery是一个函数库,简化了DOM操作,屏蔽了浏览器兼容性问题.函数分为4类 (1)DOM操作 (2)事件处理 (3)动画 (4)AJAX jQuery3的新特性有哪些? 1. ...