一加Ace2 Pro真機揭曉 鈦空灰配色質感拉滿
終于，在經過了幾波預熱之后，一加Ace2 Pro的外觀真機圖在網上出現了。還是博主數碼閑聊站曝光的，這次的外觀設計還是延續了一加11的方案，只是細節上有了調整，例如新加入了鈦空灰
我們實現此目的的方法是使文本透明，通過 background-image 屬性在文本上放置背景裝飾，并使用 background-clip 將該背景裝飾剪切到文本字符。
我們可以創建的一些示例如下圖所示。
圖片
為了創建我們想要的效果，我們首先將元素的顏色設置為 transparent 。在下面的代碼中，我們設置 <h1> 標題的樣式：
h1 { color: transparent;}當然，這樣做意味著文本將不可見，因此這本身還不夠。
下一步是應用 background-clip: text，它將剪輯我們在元素上設置的任何背景著色或效果，只剪輯到文本的實際字符上，而不是填滿整個文本框：
h1 { color: transparent; background-clip: text;}現在我們準備施展一些魔法了。我們的文本是透明的，我們應用到它的任何背景效果都會被剪切到文本本身。
讓我們首先嘗試在標題文本上設置漸變效果：
h1 { color: transparent; background-clip: text; background-image: linear-gradient(to right, #218bff, #c084fc, #db2777);}在這里，我們設置了一個從左到右的漸變，它將跨越標題文本。
圖片
我們可以嘗試無限的變化，例如不同的顏色、改變漸變的方向、創建漸變圖案等等。
讓我們嘗試另一個例子，這次創建一個條紋圖案：
h1 { color: transparent; background-clip: text; background-image: repeating-linear-gradient(-57deg, #218bff, #218bff 3px, #c084fc 3px, #c084fc 6px);}
圖片
這是另一個例子，使用了更復雜的模式。我還添加了 text-stroke 來讓字母更加清晰。
h1 { color: transparent; -webkit-background-clip: text; /* Edge, Chrome */ background-clip: text; /* Safari, FF */ /* Pattern from https://www.magicpattern.design/tools/css-backgrounds */ background-color: #e5e5f7; opacity: 0.8; background-image: linear-gradient( 30deg, #444cf7 12%, transparent 12.5%, transparent 87%, #444cf7 87.5%, #444cf7 ), linear-gradient( 150deg, #444cf7 12%, transparent 12.5%, transparent 87%, #444cf7 87.5%, #444cf7 ), linear-gradient( 30deg, #444cf7 12%, transparent 12.5%, transparent 87%, #444cf7 87.5%, #444cf7 ), linear-gradient( 150deg, #444cf7 12%, transparent 12.5%, transparent 87%, #444cf7 87.5%, #444cf7 ), linear-gradient( 60deg, #444cf777 25%, transparent 25.5%, transparent 75%, #444cf777 75%, #444cf777 ), linear-gradient( 60deg, #444cf777 25%, transparent 25.5%, transparent 75%, #444cf777 75%, #444cf777 ); background-size: 20px 35px; background-position: 0 0, 0 0, 10px 18px, 10px 18px, 0 0, 10px 18px; -webkit-text-stroke: 1px #444cf7; text-stroke: 1px #444cf7;}
圖片
請查看我們的文章 CSS 漸變：語法速成課程[1]，了解更多有關 CSS 漸變的實用示例。
圖片
除了漸變效果之外，我們還可以使用 background-image 屬性將實際圖像應用于文本。這可以是任何圖像，但讓我們嘗試包含重復圖案的圖像。這是我們將使用的圖像。
我們可以將圖案圖像應用為背景，如下所示：
h1 { color: transparent; background-clip: text; background-image: url(pattern.jpg); background-size: contain;}我添加了 background-size: contain 來強制背景圖像很好地適合文本。（您可以在如何使用CSS背景大小和背景位置[2]中閱讀有關此和其他大小調整屬性的更多信息。有各種大小調整屬性可以幫助您對背景圖像執行幾乎任何操作?。?span style="display:none">WPp28資訊網——每日最新資訊28at.com
圖片
只是為了好玩，這是另一個具有不同背景圖像的示例。在本例中，我使用 filter: drop-shadow() 代替 text-stroke 來增強文本。
圖片
瀏覽器對 color: transparent 和 background-clip: text 的支持長期以來一直很強大，但某些瀏覽器仍然需要供應商前綴。您會注意到，在上面的示例中，我們實際上為 Edge 和 Chrome 使用了 -webkit- 供應商前綴：
-webkit-background-clip: text; /* Edge, Chrome */background-clip: text; /* Safari, FF */如果您在沒有供應商前綴的情況下在 Edge 和 Chrome 中查看演示，則效果會失敗。
如果我們使用的 CSS 功能不受任何瀏覽器支持，請注意可能會發生什么情況總是好的。例如，如果我們將文本顏色設置為 transparent 但瀏覽器不支持 background-clip: text; ，則該瀏覽器的用戶將無法閱讀我們的文本。（背景將填充整個文本框，而不是僅限于文本字符。）
為了防止這種情況，我們可以將我們的奇特效果放在 @supports 塊中來測試對 background-clip 的支持：
@supports (background-clip: text) or (-webkit-background-clip: text) { h1 { /* styles here */ }}對于不支持 background-clip 的瀏覽器，我們可以保留文本的默認黑色或設置其他顏色。
另請記住，我們在這里使用的效果可能會使文本難以閱讀，因此請注意這一點并且不要過度 - 尤其是背景圖像。還要確保文本在父元素上的任何背景顏色下都清晰可讀。
在本文中，我們研究了兩種增強網頁上文本外觀的簡單方法。我們可以將這種效果應用于頁面上的所有文本，但這幾乎肯定會造成巨大的殺傷力，并且可能會惹惱網站訪問者而不是給他們留下深刻的印象。
這些效果需要適度、謹慎地使用。如果使用得當，這種技術可以為您的網頁增添一點樂趣。
翻譯自：https://www.sitepoint.com/css-text-gradients-and-patterns
本文鏈接：http://www.tebozhan.com/showinfo-26-79449-0.html我們一起聊聊如何向文本添加漸變效果和圖案
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 抽象的藝術：Go 語言中的編程哲學
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號