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

第一种方法：背景图+定位+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. 浏览器存储(cookie、localStorage、sessionStorage)

    互联网早期浏览器是没有状态维护,这个就导致一个问题就是服务器不知道浏览器的状态,无法判断是否是同一个浏览器.这样用户登录.购物车功能都无法实现,Lou Montulli在1994年引入到web中最终纳 ...

  2. 微软Build 2017第二天 .NET Standard 2.0 Preview 的客户端跨平台

    微软公司一年一度的开发者大会,即“Microsoft Build 2017”在总部西雅图正式开幕.按照官方安排,本次大会将持续 3 天,主题围绕微软公司各项最新技术成果的展示和研讨,包括与微软相关的产 ...

  3. zoj 1013 Great Equipment DP

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=13 很经典的一个DP的题目 定义dp[i][num1][num2]表示 ...

  4. Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目

    [TOC] 1. 前言 vue-cli 一个简单的构建Vue.js项目的命令行界面 整体过程: $ npm install -g vue-cli $ vue init webpack vue-admi ...

  5. 026 hibernate操作树形结构

    树形结构:也就是目录结构,有父目录.子目录.文件等信息,而在程序中树形结构只是称为节点. 一棵树有一个根节点,而根节点也有一个或多个子节点,而一个子节点有且仅有一个父节点(当前除根节点外),而且也存在 ...

  6. iOS下KVO使用过程中的陷阱 （转发）

    iOS下KVO使用过程中的陷阱   KVO,全称为Key-Value Observing,是iOS中的一种设计模式,用于检测对象的某些属性的实时变化情况并作出响应.网上广为流传普及的一个例子是利用KV ...

  7. iOS-swift-基础篇1

    一.swift是啥?答:百度. 二.swift基础知识. 1.输出函数:print print("Hello, world!") 2.简单数据类型 变量声明:var 常量声明:le ...

  8. Lesser known dplyr tricks

    In this blog post I share some lesser-known (at least I believe they are) tricks that use mainly fun ...

  9. 并行类加载与OSGI类加载

    这回来分析一下OSGI的类加载机制. 先说一下OSGI能解决什么问题吧. 记得在上家公司的时候,经常参与上线.上线一般都是增加了一些功能或者修改了一些功能,然后将所有的代码重新部署.过程中要将之前的服 ...

  10. 20个php框架

    对于Web开发者来说,PHP是一款非常强大而又受欢迎的编程语言.世界上很多顶级的网站都是基于PHP开发的.本文我们来回顾一下20个2014年最优秀的PHP框架. 每一个开发者都知道,拥有一个强大的框架 ...