background

第一次為人,迷茫怔揩,恐懼捉邢,壓抑難免,不要想太多商膊。

1,background-image類型

1).線性漸變(Linear Gradients)- 向下/向上/向左/向右/對角方向
2).徑向漸變(Radial Gradients)- 由它們的中心定義
3).重復(fù)(repeating-Radial Gradients)(repeating-Radial Gradients)

加上 background-size 為固定寬度平鋪
否則線性漸變

2,方向

1伏伐,to right,to left,to top,to bottom, to top left ........
例:background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
2,角度晕拆,如下
例:background-image: linear-gradient(-90deg, red, yellow);
角度圖

3藐翎,使用透明度

transparent
background: white;
background-image: linear-gradient(90deg, rgba(180, 200, 0, 0.5) 60%, transparent 0),
                  linear-gradient(rgba(200, 0, 0, .5) 50%, transparent 0);
background-size: 30px 30px;
//transparent 0 透明
漸變網(wǎng)格.jpg

4,波點(diǎn)

.boDian {
            width: 900px;
            height: 900px;
            background: #655;
            background-image: radial-gradient(tan 30%, transparent 0),
                radial-gradient(tan 30%, transparent 0);
            background-size: 90px 90px;
            background-position: 0 0, 45px 45px;
        }
波點(diǎn).jpg

5,scss函數(shù)封裝

@mixin boDian($size,$dot,$base,$accent){
            background:$base;
            background-image: radial-gradient($accent $dot, transparent 0),
                radial-gradient($accent $dot, transparent 0);
            background-size: $size $size;
            background-position: 0 0, $size/2 $size/2;
        }
 //引用
        @include boDian(30px,30%,#65,tan)

6,切角效果

.boy {
        width: 800px;
        height: 494.4px;
        background: linear-gradient(-45deg, transparent 30px, #655 0) right,
            linear-gradient(45deg, transparent 30px, #58a 0) left;
        background-size: 50% 100%;
        background-repeat: no-repeat;
    }
切角.png

6.1圓角效果

.boy {
        width: 800px;
        height: 494px;
        background: radial-gradient(circle at top left, transparent 45px, red 0) top left,

            radial-gradient(circle at top right, transparent 45px, green 0) top right,

            radial-gradient(circle at bottom right, transparent 45px, teal 0) bottom right,

            radial-gradient(circle at bottom left, transparent 45px, pink 0) bottom left;

        background-size: 50% 50%;

        background-repeat: no-repeat;
    }
切圓.png

7实幕,filter

高斯模糊:filter: blur(5px);
圖片變亮:filter: brightness(200%);
圖像的對比度:filter: contrast(200%);
陰影效果:filter: drop-shadow(8px 8px 10px red);
灰度圖像:filter: grayscale(50%);
給圖像應(yīng)用色相旋轉(zhuǎn):filter: hue-rotate(90deg);
反轉(zhuǎn)輸入圖像: filter: invert(100%);
透明程度:filter: opacity(30%);
像飽和度:filter: saturate(800%);
將圖像轉(zhuǎn)換為深褐色: filter: sepia(100%);
......
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末吝镣,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子昆庇,更是在濱河造成了極大的恐慌末贾,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,884評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件整吆,死亡現(xiàn)場離奇詭異拱撵,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)掂为,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,755評論 3 385
  • 文/潘曉璐 我一進(jìn)店門裕膀,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人勇哗,你說我怎么就攤上這事昼扛。” “怎么了欲诺?”我有些...
    開封第一講書人閱讀 158,369評論 0 348
  • 文/不壞的土叔 我叫張陵抄谐,是天一觀的道長。 經(jīng)常有香客問我扰法,道長蛹含,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,799評論 1 285
  • 正文 為了忘掉前任塞颁,我火速辦了婚禮浦箱,結(jié)果婚禮上吸耿,老公的妹妹穿的比我還像新娘。我一直安慰自己酷窥,他們只是感情好咽安,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,910評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著蓬推,像睡著了一般妆棒。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上沸伏,一...
    開封第一講書人閱讀 50,096評論 1 291
  • 那天糕珊,我揣著相機(jī)與錄音,去河邊找鬼毅糟。 笑死红选,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的姆另。 我是一名探鬼主播纠脾,決...
    沈念sama閱讀 39,159評論 3 411
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼蜕青!你這毒婦竟也來了苟蹈?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,917評論 0 268
  • 序言:老撾萬榮一對情侶失蹤右核,失蹤者是張志新(化名)和其女友劉穎慧脱,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體贺喝,經(jīng)...
    沈念sama閱讀 44,360評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡菱鸥,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,673評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了躏鱼。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片氮采。...
    茶點(diǎn)故事閱讀 38,814評論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖染苛,靈堂內(nèi)的尸體忽然破棺而出鹊漠,到底是詐尸還是另有隱情,我是刑警寧澤茶行,帶...
    沈念sama閱讀 34,509評論 4 334
  • 正文 年R本政府宣布躯概,位于F島的核電站,受9級特大地震影響畔师,放射性物質(zhì)發(fā)生泄漏娶靡。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,156評論 3 317
  • 文/蒙蒙 一看锉、第九天 我趴在偏房一處隱蔽的房頂上張望姿锭。 院中可真熱鬧塔鳍,春花似錦、人聲如沸呻此。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽趾诗。三九已至,卻和暖如春蹬蚁,著一層夾襖步出監(jiān)牢的瞬間恃泪,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,123評論 1 267
  • 我被黑心中介騙來泰國打工犀斋, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留贝乎,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,641評論 2 362
  • 正文 我出身青樓叽粹,卻偏偏與公主長得像览效,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子虫几,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,728評論 2 351

推薦閱讀更多精彩內(nèi)容

  • 以前锤灿,我們要實(shí)現(xiàn)這種漸變,可能要用 Photoshop 或 Fireworks 創(chuàng)建一個(gè)漸變圖形辆脸,然后使用 bac...
    德育處主任閱讀 129,172評論 9 52
  • 本文主要講述頁面布局樣式方面涉及的知識點(diǎn)但校,更全面的對CSS相應(yīng)的技術(shù)進(jìn)行歸類、整理啡氢、說明状囱,沒有特別詳細(xì)的技術(shù)要點(diǎn)說...
    Joel_zh閱讀 847評論 0 1
  • background是css中最常見的樣式,每個(gè)網(wǎng)頁的設(shè)計(jì)都不可避免使用這個(gè)樣式倘是,今天我跟大家分享一下backgr...
    馬大哈tt閱讀 1,588評論 3 4
  • CSS 可以添加背景顏色和背景圖片亭枷,以及來進(jìn)行圖片設(shè)置。 background-color 背景...
    王玉偉的偉閱讀 323評論 0 1
  • 1. 定義和用法 background是一個(gè)簡寫屬性搀崭,可以在一個(gè)聲明中設(shè)置所有的背景屬性叨粘,可設(shè)置的屬性如下: 這些...
    lightNate閱讀 4,344評論 2 9