建站
咨詢
售后
建站咨詢
新聞中心
當我們用多個對象制作無縫圖案時，我們需要處理對象在邊界上的情況。通常我們創(chuàng)建對象的副本并將它們放置在適當的位置以使拼貼工作無縫銜接。
成都創(chuàng)新互聯(lián)公司是一家集網站建設,樂清企業(yè)網站建設,樂清品牌網站建設,網站定制,樂清網站建設報價,網絡營銷,網絡優(yōu)化,樂清網站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網站。
在 CSS 中，有一種方法可以做到這一點，而無需手動創(chuàng)建副本或對位置進行任何計算，方法是利用 CSS background 屬性。
CSS 中的背景默認是可重復的，如果我們使用 background 或 background-image 創(chuàng)建對象，無論它們的位置如何，它們都可以自動平鋪。
element {
background-image:
radial-gradient(#6155a6 30%, transparent 0);
/* default */
background-size: 100% 100%;
background-repeat: repeat;
}創(chuàng)建圖案背景
我們從指定用于平鋪的片段的大小開始。這是必不可少的一步，因為它決定了圖案的可重復空間。
element {
width: 180px;
height: 180px;
}在背景中使用radial-gradient徑向漸變創(chuàng)建一個圓形對象。
element {
width: 180px;
height: 180px;
background-image:
radial-gradient(#6155a6 30%, transparent 0);
}即使你看不到邊緣，圓圈也會正確平鋪。使用 background-position 將它移動到其他地方。不用擔心越界，瀏覽器已經幫我們搞定了。
element {
width: 180px;
height: 180px;
background-image:
radial-gradient(#6155a6 30%, transparent 0);
background-position: -110px -20px;
}我們可以通過添加更多背景圖像來添加更多對象。
element {
width: 180px;
height: 180px;
background-image:
radial-gradient(#6155a6 30%, transparent 0),
radial-gradient(#6155a6 20%, transparent 0),
radial-gradient(#6155a6 10%, transparent 0);
background-position:
-110px -20px,
-20px -75px,
20px 40px;
}此元素可用于通過平鋪制作無縫圖案。唯一的問題是元素本身不能像背景圖像那樣容易地平鋪。我們需要創(chuàng)建許多相同的元素并將它們放置在網格中。雖然截取元素的屏幕截圖并將其保存為 PNG 格式是一個快速的解決方案。
使用 CSS 涂鴉
css-doodle 提供令人興奮的功能之一是能夠使用 @doodle 函數從另一個 css-doodle 元素生成背景圖像。如果我們在 css-doodle 中創(chuàng)建圖案片段，它可以用于背景圖像。這意味著圖案片段可以平鋪。
/* container size */
@grid: 1 / 100% 180px;
/* pattern dimension */
background-size: 180px 180px;
/* pattern fragment */
background-image: @doodle(
@grid: 1 / 100%;
background-image:
radial-gradient(#6155a6 30%, transparent 0),
radial-gradient(#6155a6 20%, transparent 0),
radial-gradient(#6155a6 5%, transparent 0);
background-position:
-110px -20px,
-20px -75px,
20px 40px;
);
使用漸變來創(chuàng)建形狀是相當有限的。幸運的是，@doodle 函數可以嵌套。例如，我們可以將其中一個由 radial-gradient 創(chuàng)建的圓形對象替換為另一個 css-doodle 元素，里面是一個旋轉 30 度的心形。
/* pattern fragment */
background-image: @doodle(
background-image:
@doodle(
@grid: 1 / 100%;
@size: 80px;
margin: auto;
background: pink;
@shape: heart;
transform: rotate(30deg);
),
radial-gradient(#6155a6 20%, transparent 0),
radial-gradient(#6155a6 5%, transparent 0);
background-position:
-110px -20px,
-20px -75px,
20px 40px;
);
如何在實際開發(fā)中使用它
我建議使用 PS 和 AI 等設計工具創(chuàng)建圖案背景，但直接從代碼創(chuàng)建一些東西仍然很有趣。所以這里有兩種方法可以將它應用到您的網站：
1)、在 CSS 或 css-doodle 中創(chuàng)建圖案背景片段并截取 DOM 元素，或使用 css-doodle 的 export() API 將圖案片段保存為圖像。
.container {
background-image: url(pattern.png);
background-size: /* fragment size */;
}2)、直接導入并使用 css-doodle。
我希望這篇文章很好地解釋了我們如何利用 CSS 背景重復和 css-doodle 來創(chuàng)建無縫背景圖案。有無數種方法可以形成對象，所以我可以想象這是一種非常有用的技術。
當然，最終我們選擇那種方式來實現(xiàn)，都是根據我們具體的開發(fā)項目與自己本身所掌握的技術。
本文標題：如何利用CSS實現(xiàn)一款漂亮的無縫背景圖
標題來源：http://www.dlmjj.cn/article/dhpjchp.html
