CSS基础学习--22 图像透明/不透明

这篇具有很好参考价值的文章主要介绍了CSS基础学习--22 图像透明/不透明。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、透明度属性

CSS3中属性的透明度是 opacity

正常的图像

CSS基础学习--22 图像透明/不透明

相同的图像带有透明度:

CSS基础学习--22 图像透明/不透明

img
{
  opacity:0.4;
  filter:alpha(opacity=40); /* IE8 及其更早版本 */
}

备注:Opacity属性值从0.0 - 1.0。值越小,使得元素更加透明。

IE8和早期版本使用滤镜:alpha(opacity= x)。 x可以采取的值是从0 - 100。较低的值,使得元素更加透明。

二、图像的透明度 - 悬停效果

将鼠标移到图像上:

CSS基础学习--22 图像透明/不透明

 CSS样式代码:

img
{
  opacity:0.4;
  filter:alpha(opacity=40); /*  IE8 及其更早版本 */
}
img:hover
{
  opacity:1.0;
  filter:alpha(opacity=100); /* IE8 及其更早版本 */
}

第一个CSS块是和例1中的代码类似。此外,我们还增加了当用户将鼠标悬停在其中一个图像上时发生什么。在这种情况下,当用户将鼠标悬停在图像上时,我们希望图片是清晰的。

此CSS是:opacity=1.

IE8和更早版本使用: filter:alpha(opacity=100).

当鼠标指针远离图像时,图像将重新具有透明度。

三、透明的盒子中的文字

效果图:

CSS基础学习--22 图像透明/不透明

 代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div.background
{
  width:500px;
  height:250px;
  background:url(https://www.runoob.com/images/klematis.jpg) repeat;
  border:2px solid black;
}
div.transbox
{
  width:400px;
  height:180px;
  margin:30px 50px;
  background-color:#ffffff;
  border:1px solid black;
  opacity:0.6;
  filter:alpha(opacity=60); /* IE8 及更早版本 */
}
div.transbox p
{
  margin:30px 40px;
  font-weight:bold;
  color:#000000;
}
</style>
</head>
 
<body>
 
<div class="background">
<div class="transbox">
<p>这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。
</p>
</div>
</div>
 
</body>
</html>

        首先,我们创建一个固定的高度和宽度的div元素,带有一个背景图片和边框。然后我们在第一个div内部创建一个较小的div元素。 这个div也有一个固定的宽度,背景颜色,边框 - 而且它是透明的。透明的div里面,我们在P元素内部添加一些文本。文章来源地址https://www.toymoban.com/news/detail-502711.html

到了这里,关于CSS基础学习--22 图像透明/不透明的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • layui弹框(上)- 基础参数:弹出层、多按钮、对齐方式、遮罩层(透明度)、定时关闭...的集合

    一、使用layui的第一步:引用layui的js和css文件 link rel=\\\"stylesheet\\\" href=\\\"layui/css/layui.css\\\" / script src=\\\"layui/layui.js\\\"/script 您也可以引用网络资源 script src=\\\"layui.js:https://heerey525.github.io/layui-v2.4.3/layui/layui.js\\\"/script link rel=\\\"stylesheet\\\" href=\\\"https://heerey525.github.io/layui-v2.4.3/layui/css/layui.css\\\" 二、引

    2024年02月02日
    浏览(65)
  • 透明度和透明贴图制作玻璃水杯

    模型透明度是指一个物体或模型在呈现时的透明程度。它决定了物体在渲染时,是否显示其后面的物体或背景。 在图形渲染中,透明度通常以0到1之间的值表示。值为0表示完全透明,即物体不可见,背景或其他物体完全穿透;值为1表示完全不透明,即物体完全可见,没有透

    2024年02月07日
    浏览(53)
  • Unity之透明度混合与ps的透明度混合计算结果不一致(gamma矫正和线性空间)

    前段时间学习shader时发现了一个问题,一张纯红色透明度为128的图片叠加在一张纯绿色的图片上在unity中得出的结果与ps中的结果不一致。网上查找了ps中的透明混合的公式为  color = A.rgb*A.alpha + B.rgb*(1-A.alpha)。自己计算了一下结果总是不对。  红色透明度128的图           

    2024年02月05日
    浏览(49)
  • Android 透明度设置

    目录 一、透明度对照表 二、透明度介绍 三、透明度设置 3.1 xml设置 3.2 代码设置   注:00是完全透明,FF就是完全不透明         我们的UI小姐姐就喜欢给 「不透明度」 ,这个需要自己判断一下。         Android中的颜色值通常遵循RGB/ARGB标准,使用时通常以“#”字符

    2024年02月05日
    浏览(50)
  • uniapp中map组件打点/地图上显示圆/设置map圆的透明度(十六进制颜色透明度)

    一般来说我们都是想设置成透明的圆,十六进制的后两位表示颜色 eg:#0000006A 6A就是表示透明度,数字越大透明度越高

    2024年02月12日
    浏览(50)
  • ObjectArx 设置填充透明度问题

    初始化透明度参数AcCmTransparency对象时,需要调用setAlpha设置透明度值,这里传入的值是0 255,但cad特性面板上显示的是0 90,且经过测试发现,传入值与特性面板显示的值也是不同的,比如传入90,显示64,百度搜索了个寂寞,最后还是在谷歌找到了答案,原来设置的值和特性面

    2024年02月15日
    浏览(49)
  • Android中设置颜色透明度

    1.布局中的xml设置 2.在代码中用的话就是用Java代码设置是这样设置的 3.从FF开始表示完全不透明,到00表示完全透明。左边的是透明百分比,右边是透明的代号,如果你想设置颜色透明50%,就是 #809E9E9E

    2024年02月14日
    浏览(43)
  • WPF 控件设置透明度的方法

    方法一:通过 Opacity 属性设置背景色透明度。范围从0-1,0表示完全透明,看不见。     通过 Opacity 属性去改变控件透明度 会影响子控件的透明度,是因为Opacity属性是在UIElement 类(以及Brush基类)中定义,所有元素都具有该属性; 界面如下图图  方法二:通过Background 属性的

    2024年02月11日
    浏览(49)
  • 人工智能透明度的最新进展

    作者:禅与计算机程序设计艺术 人工智能(AI)已经成为社会发展的重要组成部分。随着人工智能技术的不断发展,在法律界也逐渐将其作为重要的驱动力之一。然而,由于人工智能算法和模型的黑箱特性,加之对人工智能模型的理解能力有限,因此导致人工智能系统产生的

    2024年02月08日
    浏览(52)
  • Unity中特效透明度动态设置

    在Unity开发中,特效的透明度无法直接使用代码或者动画直接控制很不方便,便制作了一个一个脚本,专用来控制一个节点下的所有子节点的透明度。  在其父节点添加即可  

    2024年02月15日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包