透明色Opacity属性的使用

透明色Opacity属性的使用Opacity属性:值 描述 value 指定不透明度。从0.0(完全透明)到1.0(完全不透明) inherit Opacity属性的值应该从父元素继承 代码:<!DOCTYPEhtml><htmllang=”en”><head><metacharset=”UTF-8″><title>Title</title><style>i

大家好,又见面了,我是你们的朋友全栈君。

Opacity属性:

描述
value 指定不透明度。从0.0(完全透明)到1.0(完全不透明)
inherit Opacity属性的值应该从父元素继承

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            position: absolute;
        }
        p{
            font-size: 25px;
            font-weight: 800;
            padding-top: 20px;
            text-align: center;
        }
        .f{
            height: 138px;
            width: 220px;
            background-color: black;
            opacity: 0;

        }
        .f:hover{
            opacity: 0.5;
            color: white;
        }
    </style>
</head>
<body>
    <div>
        <img width="220px" height="138" src="../day3/images/1.jpg" alt="">
        <div class="f">
            <p>你好</p>
        </div>
    </div>
</body>
</html>
  1. 要使用opacity属性时注意:
  • 如果要在图片上方使用opacity属性,图片的位置要绝对定位position: absolute
  • 设置阴影部分的宽度和长度,图片使用定位后,阴影部分能和图片覆盖
  • 设置阴影部分的背影颜色,这里我设置的黑色background-color: black;
  • 先使opacity的值等于0,意思是鼠标不经过时不显示,值越大,代表的颜色越深
  • 最后设置鼠标经过图型hover,设置要显示颜色的black深度
  • 在阴影里也可以显示文字,可以对文字的文字进行调整,使文字居中,或者其他地方,在此我显示的“你好”,用的白色显示出来
  • 阴影部分的宽度、长度一般和照片的宽度、长度大小相等,为了能够全部覆盖,大一点了无所谓,只是不美观

效果如下:

透明色Opacity属性的使用

 

透明色Opacity属性的使用

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/141372.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • c语言 银行家算法(完整代码实现)

    c语言 银行家算法(完整代码实现)银行家算法例子:T0时刻进程P1提出需要(1、0、2)个资源的请求T0时刻进程P4提出需要(3、3、0)个资源的请求T0时刻进程P0提出需要(0、2、0)个资源的请求全局变量:intMax[5][3]={7,5,3,3,2,2,9,0,2,2,2,2,4,3,3};//五个进程对各种资源的最大需求intAllocation[5][3]={0,1,0,2,0,0,3,0,2,2,1,1,0,0,2};//五个进程已分配的各种资源数目intNeed[5][3]={7,4,3

  • open 函数[通俗易懂]

    open 函数[通俗易懂]open函数用来打开一个文件open返回值为一个文件句柄,从操作系统托付给你的python程序,一旦处理完文件,需要归还句柄,只有这样你的程序不会超过一次能打开的文件句柄的数量上限withopen(‘photo.jpg’,’r+’)asf: jpgdata=f.read()open的第⼀个参数是⽂件名。第⼆个(mode打开模式)决定了这个⽂件如何被打开。如果你想读…

  • 修改国内yum源

    修改国内yum源

  • Git知识总览(一) 从 git clone 和 git status 谈起「建议收藏」

    Git知识总览(一) 从 git clone 和 git status 谈起「建议收藏」本篇博客是整理git相关知识的第一篇,因为之前一直是用SourceTree对Git的命令行操作用的不是特别熟,于是乎过了一遍ProGit(链接:https://git-scm.com/book/zh/

  • 四旋翼无人机飞行器基本知识(四旋翼无人机结构和原理+四轴飞行diy全套入门教程)

    第一篇《四旋翼飞行器结构和原理》第二篇《四旋翼飞行diy全套入门教程》四旋翼飞行器结构和原理1.结构形式旋翼对称分布在机体的前后、左右四个方向,四个旋翼处于同一高度平面,且四个旋翼的结构和半径都相同,四个电机对称的安装在飞行器的支架端,支架中间空间安放飞行控制计算机和外部设备。结构形式如图1.1所示。.工作原理四旋翼飞行器通过调节四个电机转速来改变旋翼转速,实现升力的变化,从而…

  • 【SCOI补全记】SCOI2016 bzoj4567-4572

    【SCOI补全记】SCOI2016 bzoj4567-4572T1:背单词(bzoj4567)题解代码T2:幸运数字(bzoj4568)题解代码T3:萌萌哒(bzoj4569)T4:妖怪(bzoj4570)T5:美味(bzoj4571)题解代码T6:围棋(bzoj4572)T1:背单词(bzoj4567)题解关键词:trie树贪心题意有些难懂,简单解释一下。对于在位置xxx的单词:…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号