僞元素容器多背景

2020/05/11閱讀時間約 2 分鐘

利用::before以及::after做出重疊多個背景，甚至多個邊框的效果。

由css3 【content】生成內容，content一般和::before,::after一起使用，用來生成內容，content的內容一般可以為以下四種：

none：不生成任何值；

attr：插入標籤屬性值；

url：使用指定的絕對或相對地址插入一個外部資源（圖像，視頻或瀏覽器支持的其他任何資源）；

string：插入字符串。

STEP1.
頁面中包含三組<DIV>內容區塊，id名稱依序為sprite、outside、corner。

首先來美化sprite，使用的圖片為三朵一起的花，單朵花尺寸寬:75px高:128px。

為變動寬width:50%;min-width:300px;max-width:900px;背景圖background-position: -150px 0;向左移動出左側二朵花(單朵花尺寸寬:75px高:128px)讓黃花顯示。

再利用::before安排右上角藍花，::after安排右下角紅花。

STEP2.
Outside區塊使用the box圖，尺寸為寬195、高230。

首先設定整個外框、h2標題與標題區底色(#outside .hero)。

再以#outside .hero::before設定背景圖，可更改#outside .hero::before的右側邊界負值與座標值控制圖位置。

STEP3.
corner區塊使用使用三張插圖並利用::before製作折角效果。#corner先設定背景色、寬度與左側中間鉛筆背景圖。

#corner::before設定右上角折角造型，更改border-width: 20px;及可改變折角尺寸。

#corner::after設定右下角二個背景圖裝飾。

為什麼會看到廣告

哩老師

現職：精誠資訊恆逸教育訓練中心專任多媒體設計資深講師專長：精通多媒體網頁視覺設計、平面設計與多媒體整合應用、Photoshop影像處理、網站視覺設計、Illustrator向量繪圖、Animate動畫效果設計、Dreamweaver網頁互動效果、Dreamweaver資料庫整合及RWD等。

留言0

查看全部

發表第一個留言支持創作者！