html中图片透明度渐变效果,css怎么设置透明度渐变?

css怎么设置透明度渐变?下面本篇文章给大家介绍一下使用CSS设置透明度渐变效果的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

1b49d0e2fdeb57b8f36bc7987b4f0686.png

css怎么设置透明度渐变?

在CSS中可以使用linear-gradient()函数配合rgba()来设置透明度渐变。其中使用linear-gradient()函数设置渐变,使用rgba()设置来设置颜色透明度。

示例:

图片透明度渐变实例演示

.div1 {

box-sizing: border-box;

width: 400px;

height: 320px;

font-size: 22px;

padding-top: 100px;

overflow: hidden;

background: no-repeat center top / 100% 100%;

background-image: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)), url(1.jpg)

}

.div2 {

box-sizing: border-box;

width: 400px;

height: 320px;

font-size: 22px;

padding-top: 100px;

overflow: hidden;

background: no-repeat center top / 100% 100%;

background-image: url(1.jpg)

}

设置透明度渐变效果的图片
正常图片

效果图:

08e62fd75491e8d4e9101ef794731e6e.png

说明:linear-gradient() 函数用于创建一个线性渐变的 "图像"。

为了创建一个线性渐变,你需要设置一个起始点和一个方向(指定为一个角度)的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡,并且你必须指定至少两种,当然也会可以指定更多的颜色去创建更复杂的渐变效果。

css语法:background: linear-gradient(direction, color-stop1, color-stop2, ...);RGBA ()

RGBA 的意思是(Red-Green-Blue-Alpha)它是在 RGB 上扩展包括了“alpha”通道,运行对颜色值设置透明度。

更多css的相关知识,可访问:web前端自学!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/561229.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

oc 画一个圆弧_SolidWorks一步扫描特征,就可以画出一个螺母,你有思路吗

建模过程:1.在【上视基准面】画一个六边形。(引导线)1-1.圆角,半径:2 ,框选六边形。2.在【前视基准面】画草图如下:(轮廓)2-1.左侧画一段竖直构造线,端点与圆弧穿透几何关系。3.【线段】草图绘制点&#xf…

python默认安装位置_如何更改python中pip的默认安装路径

具体方法: 1、查看 site.py 文件的位置(一般在python安装目录的\Lib下),可使用指令查询:python -m site -help2、打开site.py文件,更改 USER_BASE 和USER_SITE 的路径即可。其中 USER_BASE 和USER_SITE其实就是用户自定…

java被电脑阻止怎么办_学电脑,一定要记住的6个常用命令,它能让你快速成为电脑达人...

电脑对于我们所有人来说都是一项非常伟大的发明。目前,在我们的生活中它已经成为了一个不可或缺的工具。时时围绕在我们的周围,如果离开电脑,可以说很多人都将寸步难行,科技也得不到发展。那么作为电脑的初学者,我们该…

动词ing形式的5种用法_英语语法这样学就对了!动词-ing结构的特征和四种形式是?...

想彻底学好英语一定要善于总结语法!动词-ing结构的特征和四种形式都是什么?想彻底学好英语,语法这一关是一定要过的。我将通过这个平台定期更新实用、常用的英语语法知识解读,直至覆盖完全部的英语语法知识点,使你通过…

mysql 数据迁移_【AWS 功能】Mysql 数据库迁移至Amazon RDS方案

今天,我们讲讲如何使用源MySQL数据库执行数据库迁移到MySQL数据库的目标Amazon RDS的方案,同时由于(源和目标数据库引擎是相同的)——模式结构、数据类型和数据库代码在源和目标数据库之间是兼容的,这意味着这种迁移不需要任何模式转换。数据…

eclipse run on server 点不了finish_分享点经验 | springboot入门及编码

点击蓝字关注我们AMP很多新人在刚刚接触后端开发的时候,可能对springboot的概念、如何快速上手一个springboot项目多多少少有些一知半解;此外写出来的代码也因为不够规范而可读性较低,导致后期难以维护。本文旨在站在新手的视角,尽…

mac redis 客户端_分享一个免费好用的Redis桌面客户端

今天波波为做开发的朋友们分享一个免费好用的Redis桌面客户端。这个工具纯属机缘巧合下发现的,前几天波波在开发一个物联网平台,硬件通信部分用了Workman Gateway来负责通信和消息推送,结果因为自己把官方的文档理解错误,遇到了一…

实测实量数据表格_建筑工程质量实测实量操作手册,130页PPT下载!

来源:百度文库版权归原作者所有文件下载方式在最后第一篇 总 则1、适用范围2、取样总则第二篇 尺差控制篇1、混凝土结构工程2、实测实量数据、水平基准线上墙3、砌体工程4、抹灰工程5、设备安装6、涂饰工程7、饰面墙砖(石材)工程8、地面饰面砖(石材)工程9、吊…

0018计算机基础知识,0018 0019计算机应用基础上机试题

满意答案pgeqanyyafe2013.02.23采纳率:51% 等级:12已帮助:6328人有2套:复制发给你? 还是通过QQ发给你呢? 还是给你发到邮箱呢?第一套:《计算机应用基础》上机考试试题 姓名&…

java接口测试工具_【分享】接口工具对比(apipost、jmeter、postman、swagger等)

一、接口都有哪些类型?接口一般分为两种:1.程序内部的接口 2.系统对外的接口系统对外的接口:比如你要从别的网站或服务器上获取资源或信息,别人肯定不会把 数据库共享给你,他只能给你提供一个他们写好的方法来获取数据…

用flash做古诗动画_带孩子用两张A4纸做动画(内附资源可下载)

不要让孩子在成长过程中丢失了对自然的好奇心,在自然科学(物理,化学,生物,天文......)的实验中快乐成长,热爱生活,保护环境,探索精彩世界。科学爸爸的孩子从2014年四岁多开始对科学产生了浓厚兴…

promise的状态以及api介绍_2019年,盘点一些我出过的前端面试题以及对求职者的建议

笔者虽然曾经也面试过很多求职者,但是对于前端的笔试和面试,我觉得并不能体现一个人的真实能力,所以建议大家多修炼前端真正的技术.对于前端面试题,之前也承诺过读者要出一篇,笔者大致总结一下曾经面试的题目.后续不会再出面试题,而是聚焦于一些真正的,有利于成长性的技术文章和…

otis电梯服务器tt使用说明_南充私人电梯

南充私人电梯,成都蒂澳机电放心产品,并在麓山国际社区、麓湖别墅、蔚蓝卡地亚、城南官邸、城南逸家、复地御香山、万科五龙山、保利198、美城悦荣府、三利宅院、维也纳森林别墅、乐山御墅、华侨城纯水岸(东岸)、芙蓉古城等知名别墅楼盘均有大量成功案例。…

计算机上课创意互动游戏初中,16个课前热身小游戏:让每一堂课都充满新鲜感...

课堂正式开始之前,设置热身游戏,教学效果会更佳。它可以达到两个目的:一是把学生的注意力吸引到课堂;二是通过游戏自然过渡到课堂内容,增加课堂趣味性和学生参与感。受新冠病毒的影响,居家学习席卷全国&…

ros c++ 代码说明文档_减少运维工作量,如何通过 ROS 轻松实现资源编排新方式...

在日常工作中,我们一定遇到过需要快速构建系统的工作情形:作为资源管理人员,需要接收一定数量以及配置的资源申请,这些申请要求网络、存储设备按需到位;作为开发人员,需要将一套开发环境,复制一…

华硕和梅林系统哪个好_RUSHCRM:定制CRM软件系统哪个好?

Crm系统是一个可以帮助企业获得、维护以及提升客户价值的系统,并且做到以客户为中心的管理模式。但是有不少企业在选择crm软件系统的过程中,会发现在国内crm系统的市场中,绝大多数crm系统的功能都不能完全满足企业的需求,那么就需…

字典哈希表的实现原理_GCC中unordered_(multi)set/map的实现原理 (Part 2 图解哈希表结构)...

写在前面(本专栏仅是个人笔记本,有胡言乱语和错漏部分)本文以图文代码的形式记录了_Hashtable的结构,如何编排每一个bucket的链表,如何将每个bucket的链表串在一起形成一个长链表,如何利用迭代器遍历_Hasht…

null === undefined_【英】两个“非值”:undefined 和 null

前言本期英文由Dr. Axel Rauschmayer分享。英文从这开始~~Most programming languages have only one value for “no value” or “empty reference”. For example, that value is null in Java. JavaScript has two of those special values: undefin…

有趣的编程代码_iPad amp; Mac 编程游戏推荐

今天想给大家推荐一款免费的编程 App,它的名字叫「Swift Playgrounds」。会不会有人一看到“编程”两个字就觉得怕了怕了,感觉太深奥了?但是,这款游戏真的简单又有趣,值得你去试试。▍应用介绍这是一款适用于 Mac 和 i…

tensorflow支持python3.7吗_TensorFlow2.1正式版上线:最后一次支持Python2,进一步支持TPU...

机器之心报道参与:杜伟、一鸣TensorFlow2.1的更新,能够让弃坑的用户回心转意吗?去年 10 月,谷歌才发布了 TensorFlow 2.0 正式版。时隔三个月后,昨日官方发布了 TensorFlow 2.1,本次版本更新带了了多项新特…