成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

如何使用CSS和SVG剪切和遮罩技術(shù)

hover_lew / 1802人閱讀

摘要：通過結(jié)合使用和遮罩技術(shù)，你將會(huì)擁有更多的可能性去使用網(wǎng)絡(luò)圖像。在圖像上應(yīng)用遮罩元素為了使用得到一種感覺，我們將在圖像上使用遮罩。瀏覽器支持在我們使用這種新的處理圖像的方法之前，注意到瀏覽器對(duì)剪切和遮罩的支持不一致是非常重要的。

本文轉(zhuǎn)載自：眾成翻譯
譯者：hidoos
鏈接：http://www.zcfy.cc/article/1100
原文：https://getflywheel.com/layout/css-svg-clipping-and-masking-techniques/

SVGs 能夠很好的在 web 上工作, 剪切和遮罩允許你使用有趣的方式去展示或隱藏 web 圖像， 使用這些技術(shù)也能讓的設(shè)計(jì)變得更加靈活因?yàn)槟悴恍枰バ薷幕蛘邉?chuàng)建新的圖像——這些都可以用代碼來實(shí)現(xiàn)。通過結(jié)合使用 CSS 和遮罩技術(shù)，你將會(huì)擁有更多的可能性去使用網(wǎng)絡(luò)圖像。

需要明確的是，遮罩和剪切是通過 CSS 來處理圖像的兩種不同的方法，讓我們從剪切開始吧！

剪切基礎(chǔ)

如果你曾經(jīng)使用過 Photoshop , 你大概已經(jīng)很熟悉剪切遮罩了。 他們有一些共同點(diǎn)，剪切通過放置矢量圖形來使用,比如圓和三角形, 在圖像和元素的上面矢量圖形外面的任何部分都會(huì)顯示，所有矢量圖形邊界的外面都將被隱藏。

舉個(gè)例子，如果一個(gè)三角形的剪切遮罩覆蓋上樹林圖像上的話, 你可以看到三角形里面的森林圖像。圖形的邊界被稱做剪切路徑, 不要和已經(jīng)廢棄掉的 clip 屬性混淆，你可以使用 clip-path 去創(chuàng)建一個(gè)剪切路徑。

深入理解剪切

剪切總是矢量路徑，這可能會(huì)比較混淆, 但是路徑的外面的任何部分都會(huì)被隱藏, 而路徑的里面都會(huì)顯示。為了更好的理解，你可以去測(cè)試一下，在 CodePen 上看看這個(gè)示例。

這是上面示例的 HTML 代碼片段：

這段 CSS 使剪切生效：

.polygon-clip-triangle-equilateral {
  -webkit-clip-path: polygon(0% 87%, 50% 0%, 50% 0%, 100% 87%);
  clip-path: polygon(0% 87%, 50% 0%, 50% 0%, 100% 87%);
  -webkit-clip-path: url("#polygon-clip-triangle-equilateral");
  clip-path: url("#polygon-clip-triangle-equilateral");
}

你可以看到 clipPathid 在 HTML 的哪個(gè)部分，它是如何使用 clip-path 的 URL 去制作剪切效果的。

Clippy 工具

Clippy 是一個(gè)用來生成 CSS 剪切路徑的偉大工具。這里有許多不同的初始圖像并且這些形狀的尺寸都是可以自定義的。

遮罩基礎(chǔ)

在網(wǎng)頁上，遮罩是使用 PNG 圖片、CSS 漸變、或一個(gè) SVG 元素來隱藏圖片或其它元素的部分。我們將集中注意力在 SVG 圖像上，不過請(qǐng)注意遮罩可以使用其他類型的圖片或者樣式的。

遮罩屬性和遮罩元素

僅僅是為了幫助理解, 請(qǐng)記住被遮罩的元素是“原始”（還沒有應(yīng)用遮罩的）圖片， 你可能不想看到全部的圖片,所以使用 CSS mask 屬性來完成隱藏部分圖片的工作。 mask 是 CSS 一組獨(dú)立屬性的簡(jiǎn)寫 , 我們將接下來會(huì)介紹它。SVG 元素被用來給 SVG 內(nèi)部的圖像添加遮罩效果。在接下來的示例中, 遮罩是添加了漸變效果的圓形。

在 SVG 圖像上應(yīng)用 SVG 遮罩元素

為了使用 SVG mask 得到一種感覺，我們將在 SVG 圖像上使用遮罩。

這給人的第一印象可能會(huì)比較復(fù)雜, 但是它可以很好遮罩下面的圖像。我們有一張真實(shí)的圖片作為背景，那么 SVG 在哪里起作用呢？和剪切不同, 這張背景圖片技術(shù)上來說是在 SVG 元素內(nèi)部的。我們將使用 CSS 來給圖片應(yīng)用遮罩，屬性將來自于 SVG 遮罩元素，在我們的 CSS 中指定一個(gè) mask-element id。

為了了解更多的細(xì)節(jié), 查看 Codepen 示例，這是遮罩 SVG 圖像的工作代碼:

如果你查看審查面板,你可以看到遮罩元素的邊界. 這個(gè)圓的圖形是使用遮罩創(chuàng)建的。

使用這段 CSS, 我們制定了在哪里找到遮罩，它將會(huì)找到 #mask1 id：

/* Here’s the CSS for masking */
.masked-element image {
  mask: url(#mask1);
}

注意到在圓形里面的漸變了嗎？一個(gè)漸變被應(yīng)用,而且也給圓形設(shè)置了遮罩。
SVG 文本遮罩

文本遮罩可以做到非常酷的事情,比如通過文字的輪廓顯示圖像。好消息是文本元素可以在 SVG 內(nèi)部使用。瀏覽器也會(huì)在未來支持, 這可以以一種非常有趣的方式來結(jié)合使用圖片和排版。

下面是對(duì)發(fā)生的事的基本解釋. 這里有一段 SVG 文本元素在 SVG 遮罩內(nèi)部。我們指定了一個(gè)白色的 RGB 值, 它創(chuàng)建了一個(gè)橢圓環(huán)繞著遮罩文字。任何在橢圓內(nèi)部都能穿過文字直接顯示,產(chǎn)生一種剪切輪廓的感覺。


    
    
      
        
        My Text
        SVG
      
    
    
  
  
/* Here’s the CSS for text element */
#myText {
font-size: 125px;
font-style: bold;
fill: #000;
}

/* Here’s the CSS for masking */
.masked {
mask: url("#myMask");
}

為了完全地理解，觀察和體驗(yàn)這段代碼是非常有用的，試著在 Codepen 修改一下文字, 修改一下文字,調(diào)整一下尺寸。

瀏覽器支持

在我們使用這種新的處理圖像的方法之前，注意到瀏覽器對(duì)剪切和遮罩的支持不一致是非常重要的。剪切的支持程度比遮罩的高, 但是 IE 瀏覽器不完全支持剪切，現(xiàn)在的瀏覽器對(duì) CSS 遮罩的支持也非常有限,所以我們建議在一些元素上使用這些特性來增強(qiáng)效果，這樣的話,如果用戶的瀏覽器不支持 , 它也不會(huì)影響到內(nèi)容的查看體驗(yàn)。

如果要測(cè)試和查看遮罩和剪切的支持程度，我建議在 JSFiddle 或 Codepen 編寫一個(gè)實(shí)例然后在不同的瀏覽器里面測(cè)試， 不要因?yàn)檫@些限制讓你感到失望——它們總是很好領(lǐng)先的游戲一旦支持的話就會(huì)變成主流,你將會(huì)確切的指導(dǎo)怎樣徹底改變你的圖像, 當(dāng)你感到困惑時(shí), 一定要參考可信的引用網(wǎng)站 Can I Use.

在體驗(yàn)過這些實(shí)例之后，這應(yīng)該提供了一個(gè)關(guān)于遮罩和剪切的好的介紹。盡管現(xiàn)在瀏覽器支持程度很有限,這將有可能在未來成為一種主流實(shí)踐。思考怎么使用這些技術(shù)創(chuàng)建一個(gè)有趣的視覺效果總是讓人感覺愉快，網(wǎng)絡(luò)圖像的未來讓我們可以不依賴圖像編輯器，直接在瀏覽器平臺(tái)上更高效的去創(chuàng)建和修改圖像。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111515.html

相關(guān)文章

  • 用原生js寫出一個(gè)彈框+遮罩層的頁面,完成彈框垂直居中頁面且點(diǎn)擊彈框外任何區(qū)域去掉彈框和遮罩層的功能

    摘要：背景官網(wǎng)有個(gè)對(duì)話框組件如圖如果哪天不能用框架了不能用組件了只能用原生寫頁面現(xiàn)在的我可能要一個(gè)頁面寫一年目標(biāo)用原生完成這個(gè)頁面彈框處于垂直居中狀態(tài)且點(diǎn)擊彈框外任意區(qū)域關(guān)閉彈框?qū)懥撕芫煤芫脮r(shí)間就不說了遇到的最難的問題就是不知道怎么關(guān)閉彈框后面還 背景:Ant官網(wǎng)有個(gè)對(duì)話框Model組件.如圖: showImg(https://segmentfault.com/img/bVbwMCG?w=1...

    betacat 評(píng)論0 收藏0

  • 用原生js寫出一個(gè)彈框+遮罩層的頁面,完成彈框垂直居中頁面且點(diǎn)擊彈框外任何區(qū)域去掉彈框和遮罩層的功能

    摘要：背景官網(wǎng)有個(gè)對(duì)話框組件如圖如果哪天不能用框架了不能用組件了只能用原生寫頁面現(xiàn)在的我可能要一個(gè)頁面寫一年目標(biāo)用原生完成這個(gè)頁面彈框處于垂直居中狀態(tài)且點(diǎn)擊彈框外任意區(qū)域關(guān)閉彈框?qū)懥撕芫煤芫脮r(shí)間就不說了遇到的最難的問題就是不知道怎么關(guān)閉彈框后面還 背景:Ant官網(wǎng)有個(gè)對(duì)話框Model組件.如圖: showImg(https://segmentfault.com/img/bVbwMCG?w=1...

    CoderDock 評(píng)論0 收藏0

  • mask-image的應(yīng)用

    摘要：大概的效果就是被遮罩層與遮罩層不透明的部分重疊的部分是可見的，而遮罩層是不顯示的。利用能做出一些不錯(cuò)的效果，比如。想到用這個(gè)屬性正合適，于是要來了心型圖片，拿到設(shè)計(jì)師導(dǎo)出的文件，用壓縮下得到一個(gè)。 遮罩層，如果學(xué)過Flash的同學(xué)應(yīng)該都聽過，跟PS的剪切蒙版差不多。大概的效果就是被遮罩層與遮罩層不透明的部分重疊的部分是可見的，而遮罩層是不顯示的。類似于現(xiàn)實(shí)世界中一張A4卡紙剪了個(gè)洞，我...

    HollisChuang 評(píng)論0 收藏0

  • APICloud使用Aui自定義Toast

    摘要：使用自定義開篇在開發(fā)的中我們經(jīng)常會(huì)使用一些的框架來進(jìn)行布局，特別是使用它自適應(yīng)的效果，可以節(jié)省我們很多的精力，把注意力放在邏輯的實(shí)現(xiàn)上面，這也是優(yōu)秀框架的天然優(yōu)勢(shì)，解放你的雙手，放飛吧哈哈開個(gè)玩笑了。。。 APICloud使用Aui自定義Toast 開篇 在H5開發(fā)的app中我們經(jīng)常會(huì)使用一些ui的框架來進(jìn)行布局，特別是使用它自適應(yīng)的效果，可以節(jié)省我們很多的精力，把注意力放在邏輯的實(shí)現(xiàn)...

    CKJOKER 評(píng)論0 收藏0

  • APICloud使用Aui自定義Toast

    摘要：使用自定義開篇在開發(fā)的中我們經(jīng)常會(huì)使用一些的框架來進(jìn)行布局，特別是使用它自適應(yīng)的效果，可以節(jié)省我們很多的精力，把注意力放在邏輯的實(shí)現(xiàn)上面，這也是優(yōu)秀框架的天然優(yōu)勢(shì)，解放你的雙手，放飛吧哈哈開個(gè)玩笑了。。。 APICloud使用Aui自定義Toast 開篇 在H5開發(fā)的app中我們經(jīng)常會(huì)使用一些ui的框架來進(jìn)行布局，特別是使用它自適應(yīng)的效果，可以節(jié)省我們很多的精力，把注意力放在邏輯的實(shí)現(xiàn)...

    wenzi 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<