- 所在位置：
- 首頁(yè) >
- 編程技術(shù) >
- CSS/HTML >
- css背景顏色漸變有哪些效果？教你10個(gè)技巧
css背景顏色漸變有哪些效果？教你10個(gè)技巧
Admin 2021-10-16 群英技術(shù)資訊 1489 次瀏覽
我們想要實(shí)現(xiàn)背景顏色漸變的效果是直接可以使用CSS實(shí)現(xiàn)的，不用再做圖，那么css背景顏色漸變都可以實(shí)現(xiàn)哪些效果呢？接下來給大家分享10個(gè)實(shí)現(xiàn)css背景顏色漸變的技巧，感興趣的朋友就繼續(xù)往下看吧。
語法
background: linear-gradient(direction,color-stop1,color-stop2,...);
direction：用角度值指定漸變的方向（或角度）。color-stop1,color-stop2,...：用于指定漸變的起止顏色。
注意：至少需要兩種顏色。
第一個(gè)
background: linear-gradient(to left,#d3959b,#bfe6ba);
to left 設(shè)置漸變 從右到左，相當(dāng)于 270deg。
第二個(gè)
background: linear-gradient(to right,#d3959b,#bfe6ba);
to right 設(shè)置漸變 從左到右，相當(dāng)于 90deg。
第三個(gè)
background: linear-gradient(to top,#d3959b,#bfe6ba);
to top 設(shè)置漸變 從下到上，相當(dāng)于 0deg。
第四個(gè)
background: linear-gradient(to bottom,#d3959b,#bfe6ba);
第五個(gè)
background: linear-gradient(to top right,#d3959b,#bfe6ba);
to right top = to top right ：從左下角到 右上角，對(duì)角線角度
第六個(gè)
background: linear-gradient(45deg,#d3959b,#bfe6ba);
和 to top right 有細(xì)微差別（背景為正方形的時(shí)候無差別）。
第七種
background: linear-gradient(45deg,#d3959b 20%,#bfe6ba);
用百分比指定起始顏色的位置，默認(rèn)值為 0%。
第八種
background: linear-gradient(to right,#feac5e,#c779d0,#4bc0c8);
第九種
background: linear-gradient(45deg,#feac5e,#c779d0,#4bc0c8);
第十種
background: linear-gradient(45deg,rgba(254,172,94,0.5),rgba(199,121,208,0.5),rgba(75,192,200,0.5));
rgba 使用了 0.5 的透明度。
關(guān)于css背景顏色漸變的實(shí)現(xiàn)效果就分享到這，本文的10個(gè)css背景顏色漸變demo有一定的參考價(jià)值，需要的朋友可以看一看，希望本文對(duì)大家有幫助，想要了解更多css背景顏色漸變的內(nèi)容，大家可以關(guān)注其它的相關(guān)文章。
文本轉(zhuǎn)載自腳本之家
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：[email protected]進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，查實(shí)之后，將立刻刪除涉嫌侵權(quán)內(nèi)容。
猜你喜歡
-
CSS怎樣實(shí)現(xiàn)元素旋轉(zhuǎn)放大縮小
方法：1、利用transform屬性和rotate函數(shù)設(shè)置元素旋轉(zhuǎn)，語法為“transform:scale(角度);”；2、利用transform屬性和scale函數(shù)設(shè)置元素放大縮小，語法為“transform:scale(縮放倍數(shù));”。
-
CSS中img圖片怎樣實(shí)現(xiàn)等比例縮小的效果？
CSS中img圖片怎樣實(shí)現(xiàn)等比例縮小的效果？有時(shí)候我們上傳的圖片太大了想要對(duì)img圖片進(jìn)行縮小，而CSS中，我們使用transform屬性配合scale()函數(shù)就可以實(shí)現(xiàn)等比例縮小的效果，下面我們就來看看具體是怎樣實(shí)現(xiàn)的。
-
用CSS怎樣畫圓環(huán)，都有哪些實(shí)現(xiàn)方式
這篇文章主要介紹了實(shí)現(xiàn)CSS圓環(huán)的5種方法(小結(jié))，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
-
CSS3中Flex布局的作用及基礎(chǔ)知識(shí)有哪些
本篇文章帶大家了解一下CSS3中的Flex布局，希望對(duì)大家有所幫助！
-
CSS刪除li的默認(rèn)樣式怎么做，如何設(shè)置
方法：1、用“l(fā)ist-style”屬性去除li元素默認(rèn)小圓點(diǎn)樣式，語法“l(fā)i{list-style:none}”；2、用padding和margin屬性去除li元素默認(rèn)內(nèi)外邊距樣式，語法為“l(fā)i{padding:0;margin:0}”。
推薦內(nèi)容
- CSS中flex布局如何實(shí)現(xiàn)自動(dòng)換行？
- 在HTML中如何讓button居中，有幾種方法
- JS中怎樣刪除數(shù)組末尾元素？教你兩種方法
- vue怎樣獲取url參數(shù)?教你兩種方法
- 如何用Python計(jì)算BMI指數(shù)？一文帶你看懂
- python怎樣獲取數(shù)組元素的下標(biāo)？教你三種方法
- python中的ord函數(shù)有什么用？用法是什么？
- Python中array與list轉(zhuǎn)換如何做，方法是什么
- 在CSS中怎么實(shí)現(xiàn)一條橫線，方法是什么
- Python怎樣設(shè)計(jì)串口之間通信的程序
- phpstorm怎么使用和操作？一文帶你快速了解
- vue怎么給對(duì)象數(shù)組賦值？this.$set方法幫你解決
成為群英會(huì)員,開啟智能安全云計(jì)算之旅
立即注冊(cè)友鏈合作 群英網(wǎng)絡(luò) 智帝云 主機(jī)評(píng)測(cè) idc公司 商城系統(tǒng) 跨境電商 主機(jī)吧 酷庫(kù)博客 OA系統(tǒng) 騰訊企業(yè)郵箱 銳成信息 sdwan
關(guān)注或聯(lián)系群英網(wǎng)絡(luò)
7x24小時(shí)售前：400-678-4567
7x24小時(shí)售后：0668-2555666
24小時(shí)QQ客服
群英微信公眾號(hào)
CNNIC域名投訴舉報(bào)處理平臺(tái)
服務(wù)電話：010-58813000
服務(wù)郵箱：[email protected]
投訴與建議：0668-2555555
Copyright ? QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版權(quán)所有
增值電信經(jīng)營(yíng)許可證 : B1.B2-20140078 ICP核準(zhǔn)（ICP備案）粵ICP備09006778號(hào) 域名注冊(cè)商資質(zhì) 粵 D3.1-20240008
