背景圖片變色，或者背景漸變

時間 2020-06-19

標籤背景圖片變色或者漸變简体版

原文原文鏈接

背景：css

　　在作畢業設計的時候用到了一張背景圖，可是顏色與我想要的顏色不符，就從網上找了一下解決方法，在不改變原圖的基礎上進行變色，變爲本身想要的顏色，通過一番查找以後，找到了解決方法，有的用的是css的filter而我用的這個是簡單一點用的是css的一個函數 ---linear-gradient()函數html

語法：函數

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

　　　　direction：用角度值指定漸變的方向（或角度）。spa

　　　　color-stop：用於指定漸變的起止顏色。一個顏色的時候就是總體都是這個顏色，兩個顏色時一個爲起始顏色，一個爲終止色，多個顏色，就是多色漸設計

例子：code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<style>
#grad1 {
    height: 200px;
    background-color: red; /* 不支持線性的時候顯示 */

    background-image: linear-gradient(to bottom right, red , yellow, rgba(0,255,0,1));   
    /* 這裏的to right表示線性從左到右，從紅色漸變變成黃色在漸變爲綠色且透明度爲不透明   且在這個基礎上能夠加上本身的背景圖片只要設置url路徑便可*/

}
</style>
</head>
<body>

<div id="grad1"></div>

<p><strong>注意：</strong> Internet Explorer 8 及以前的版本不支持漸變。</p>

</body>
</html>

效果圖：htm

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。