css設(shè)置透明度漸變的方法

小編給大家分享一下css設(shè)置透明度漸變的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)是專業(yè)的泰寧網(wǎng)站建設(shè)公司，泰寧接單;提供成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站,網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行泰寧網(wǎng)站開發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

css設(shè)置透明度漸變的方法：首先創(chuàng)建一個(gè)HTML示例文件；然后在body中引入圖片；最后使用“l(fā)inear-gradient()”函數(shù)并且配合rgba來(lái)設(shè)置透明度漸變即可。

css設(shè)置透明度漸變

在CSS中可以使用linear-gradient()函數(shù)配合rgba()來(lái)設(shè)置透明度漸變。其中使用linear-gradient()函數(shù)設(shè)置漸變，使用rgba()設(shè)置來(lái)設(shè)置顏色透明度。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圖片透明度漸變實(shí)例演示</title>
<style>
.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)
}
</style>
<div class="div1">設(shè)置透明度漸變效果的圖片</div>
<div class="div2">正常圖片</div>
</body>
</html>

效果圖：

css設(shè)置透明度漸變的方法

說(shuō)明：

linear-gradient() 函數(shù)用于創(chuàng)建一個(gè)線性漸變的 "圖像"。

為了創(chuàng)建一個(gè)線性漸變，你需要設(shè)置一個(gè)起始點(diǎn)和一個(gè)方向（指定為一個(gè)角度）的漸變效果。你還要定義終止色。終止色就是你想讓Gecko去平滑的過(guò)渡，并且你必須指定至少兩種，當(dāng)然也會(huì)可以指定更多的顏色去創(chuàng)建更復(fù)雜的漸變效果。

css語(yǔ)法：

background: linear-gradient(direction, color-stop1, color-stop2, ...);

RGBA ()

RGBA 的意思是（Red-Green-Blue-Alpha）它是在 RGB 上擴(kuò)展包括了“alpha”通道，運(yùn)行對(duì)顏色值設(shè)置透明度。

以上是“css設(shè)置透明度漸變的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站題目：css設(shè)置透明度漸變的方法
本文網(wǎng)址：http://muchs.cn/article10/pidjdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、企業(yè)建站、靜態(tài)網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站維護(hù)、電子商務(wù)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容