整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
SS3中包含幾個新的背景屬性，提供更大背景元素控制。
在這您將了解以下背景屬性：
background-image
background-size
background-origin
background-clip
您還將學(xué)習(xí)如何使用多重背景圖像。
瀏覽器支持
表格中的數(shù)字表示支持該屬性的第一個瀏覽器版本號。
緊跟在 -webkit-, -ms- 或 -moz- 前的數(shù)字為支持該前綴屬性的第一個瀏覽器版本號。
| 屬性 | |||||
|---|---|---|---|---|---|
| background-image(with multiple backgrounds) | 4.0 | 9.0 | 3.6 | 3.1 | 11.5 |
| background-size | 4.01.0 -webkit- | 9.0 | 4.03.6 -moz- | 4.13.0 -webkit- | 10.510.0 -o- |
| background-origin | 1.0 | 9.0 | 4.0 | 3.0 | 10.5 |
| background-clip | 4.0 | 9.0 | 4.0 | 3.0 | 10.5 |
CSS3 background-image屬性
CSS3中可以通過background-image屬性添加背景圖片。
不同的背景圖像和圖像用逗號隔開，所有的圖片中顯示在最頂端的為第一張。
實例
#example1{background-image:url(img_flwr.gif), url(paper.gif); background-position:rightbottom, lefttop; background-repeat:no-repeat, repeat; }
可以給不同的圖片設(shè)置多個不同的屬性
實例
#example1{background:url(img_flwr.gif) rightbottomno-repeat, url(paper.gif) lefttoprepeat;}
CSS3 background-size 屬性
background-size指定背景圖像的大小。CSS3以前，背景圖像大小由圖像的實際大小決定。
CSS3中可以指定背景圖片，讓我們重新在不同的環(huán)境中指定背景圖片的大小。您可以指定像素或百分比大小。
你指定的大小是相對于父元素的寬度和高度的百分比的大小。
實例 1
重置背景圖像：
div{background:url(img_flwr.gif); background-size:80px60px; background-repeat:no-repeat;}
實例 2
伸展背景圖像完全填充內(nèi)容區(qū)域：
div{background:url(img_flwr.gif); background-size:100%100%; background-repeat:no-repeat;}
CSS3的background-Origin屬性
background-Origin屬性指定了背景圖像的位置區(qū)域。
content-box, padding-box,和 border-box區(qū)域內(nèi)可以放置背景圖像。
實例
在 content-box 中定位背景圖片：
div{background:url(img_flwr.gif); background-repeat:no-repeat; background-size:100%100%; background-origin:content-box;}
| CSS3 多個背景圖像 | |
| CSS3 允許你在元素那個添加多個背景圖像。 |
實例
在 body 元素中設(shè)置兩個背景圖像：
body{background-image:url(img_flwr.gif),url(img_tree.gif);}
嘗試一下 ?
CSS3 background-clip屬性
CSS3中background-clip背景剪裁屬性是從指定位置開始繪制。
實例
#example1{border:10pxdottedblack; padding:35px; background:yellow; background-clip:content-box; }
嘗試一下 ?
新的背景屬性
| 順序 | 描述 | CSS |
|---|---|---|
| background-clip | 規(guī)定背景的繪制區(qū)域。 | 3 |
| background-origin | 規(guī)定背景圖片的定位區(qū)域。 | 3 |
| background-size | 規(guī)定背景圖片的尺寸。 | 3 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
信ID：WEB_wysj(點擊關(guān)注) ◎ ◎ ◎ ◎ ◎◎◎◎◎一┳═┻︻▄
（頁底留言開放，歡迎來吐槽）
● ● ●
難題：直接設(shè)置一個半透明的邊框不起作用。
解決方案：padding-box盒模型border:10px solid rgba(255,255,255,.5);background: white;background-clip: padding-box;
背景知識:box-shadow 的基本用法
box-shadow: X軸偏移量 Y軸偏移量 [模糊半徑] [擴展半徑] [陰影顏色] [投影方式];
解決方案一：
利用box-shadow的屬性擴張半徑background:
yellowgreen;box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink, 0 2px 5px 15px rgba(0,0,0,.6);
特點：box-shadow 方案只能模擬實線邊框，會貼合元素的圓角
解決方案二：outline 方案background: yellowgreen;border: 10px solid #655;outline: 5px solid deeppink;特點：實現(xiàn)的“邊框”不會貼合元素的圓角，可以實現(xiàn)虛線邊框
示例：實現(xiàn)一個背景圖在div右下角，距離右邊10px 下邊10px 如圖;
解決方案一：background-position擴展方案background: #58a url(code-pirate.svg) no-repeat bottom right;background-position: right 10px bottom 10px;
解決方案二：background-origin 方案padding: 10px;background: url("code-pirate.svg") no-repeat #58a bottom right; /* 或 100% 100% */background-origin: content-box;解決方案三：calc 方案background: url("code-pirate.svg") no-repeat;background-position: calc(100% - 20px) calc(100% - 10px);兩個div很容易實現(xiàn)，那么一個div呢？
解決方案：利用box-shadow和outlinebackground: tan;border-radius: .8em;padding: 1em;outline: .6em solid #655;box-shadow: 0 0 0 .4em #655;
box-shadow的寬要小于outline寬度值，大于 (Math.sqrt(2)-1)r（這里的 r 表示 border-radius）
背景知識：CSS 線性漸變，background-size
案例一：等寬的雙色水平條紋
background: linear-gradient(#fb3 50%, #58a 0);background-size: 100% 30px;
案例二：不等寬的雙色水平條紋
background: linear-gradient(#fb3 30%, #58a 0);background-size: 100% 30px;
案例三：三色水平條紋
background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0);background-size: 100% 45px;
案例四：垂直條紋
background: linear-gradient(to right, /* 或 90deg */ #fb3 50%, #58a 0);background-size: 30px 100%;
案例五：斜向條紋
失敗方案：改變 background-size 的值和漸變的方向background: linear-gradient(45deg, #fb3 50%, #58a 0);background-size: 30px 30px;
正確方案：做到無縫拼接(60度的條紋不好做)background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);background-size: 30px 30px;
優(yōu)化方案：重復(fù)漸變做60度條紋background: repeating-linear-gradient(60deg, #fb3, #fb3 15px, #58a 0, #58a 30px);height:100%;
案例六：靈活的同色系斜向條紋
在大多數(shù)情況下，我們想要的條紋圖案并不是由差異極大的幾種顏色組成的，這些顏色往往屬于同一色系。
失敗方案：沒有任何瀏覽器支持下面這個特性background: repeating-linear-gradient(60deg, #fb3 0 15px, #58a 0 30px);正確方案：不再為每種條紋單獨指定顏色，而是把最深的顏色指定為背景色，同時把半透明白色的條紋疊加在背景色之上來得到淺色條紋background: #58a;background-image: repeating-linear-gradient(30deg, hsla(0,0%,100%,.1), hsla(0,0%,100%,.1) 15px, transparent 0, transparent 30px);
背景知識：CSS 漸變，“條紋背景”
CSS3 圖案庫lea.verou.me/css3patterns
背景知識：CSS 漸變，“條紋背景”，“復(fù)雜的背景圖案”
大自然不會以“無縫”貼片的方式重復(fù)自己......
蟬原則：通過質(zhì)數(shù)來增加隨機真實性
蟬漸變圖案：條紋圖案把不同尺寸的漸變圖案疊加起來，并使用質(zhì)數(shù)來增加隨機的真實感
background: hsl(20, 40%, 90%);background-image: linear-gradient(90deg, #fb3 11px, transparent 0), linear-gradient(90deg, #ab4 23px, transparent 0), linear-gradient(90deg, #655 41px, transparent 0);background-size: 41px 100%, 61px 100%, 83px 100%;
背景知識：CSS 漸變，基本的 border-image，“條紋背景”，基本的 CSS 動畫案例一：一個元素有一圈裝飾性的邊框，基本上就是一張圖片被裁剪進了邊框所在的方環(huán)區(qū)域。不僅如此，我們還希望這個元素的尺寸在擴大或縮小時，這幅圖片都可以自動延伸并覆蓋完整的邊框區(qū)域。
最簡單的辦法是使用兩個HTML 元素：一個元素用來把我們的石雕圖片設(shè)為背景，另一個元素用來存放內(nèi)容，并設(shè)置純白背景，然后覆蓋在前者之上。問題來了：如果只用一個元素，我們能做到這個效果嗎？
解決方案：padding: 1em;border: 1em solid transparent;background:linear-gradient(white, white) padding-box,url(stone-art.jpg) border-box 0 / cover;
案例二；老式信封樣式的邊框
案例三：螞蟻行軍邊框
@keyframes ants { to { background-position: 100% } }.marching-ants {padding: 1em;border: 1px solid transparent;background:linear-gradient(white, white) padding-box,repeating-linear-gradient(-45deg, black 0, black 25%, white 0, white 50%) 0 / .6em .6em;animation: ants 12s linear infinite;}案例四：邊框的裁切效果，用來模擬傳統(tǒng)的腳注
border-top: .2em solid transparent;border-image: 100% 0 0 linear-gradient(90deg, currentColor 4em, transparent 0);padding-top: 1em;
干貨！免費領(lǐng)取騰訊高級講師網(wǎng)頁設(shè)計教程
點我領(lǐng)取
???
關(guān)注網(wǎng)頁設(shè)計自學(xué)平臺，99%的努力都在這里
▼無法識別二維碼可以點「閱讀原文」噢！
<!DOCTYPE html>
<html>
<head>
<title>html5添加音樂</title>
<meta charset="utf-8">
<!--embed標(biāo)簽寫在<head>里面的title標(biāo)簽下-->
<embed src="C:\Users\Administrator\Desktop\告白氣球.mp3" hidden="flase" autostart="true" loop="true">
<!-- 說明：
1、src：文件路徑。
2、hidden="true"表示隱藏音樂播放按鈕，相反使用hidden="false"表示開啟音樂播放按鈕。
3、autostart="true" 表示是打開網(wǎng)頁加載完后自動播放。
4、loop="true"表示 循環(huán)播放 如僅想播放一次則為：loop="false" -->
</head>
<body>
<audio autoplay="autoplay" loop="loop" preload="auto" controls="controls"
src="C:\Users\Administrator\Desktop\告白氣球.mp3">
</audio>
<!-- 說明：
1、autoplay="autoplay"，則背景音樂將在音網(wǎng)頁打開后就自動馬上播放。
2、controls="controls"，則為了在頁面內(nèi)顯示顯示控件，如播放按鈕。
3、"loop="loop"，則是為了使背景音樂重復(fù)播放。
4、preload="auto"，則音頻在頁面加載的同時進行加載，并預(yù)備播放。
5、src=""，即是在""內(nèi)加入背景音樂的保存路徑，如：src=""。
注：若是想播放按鈕隱藏，則使用以下語句：
直接使用css 的display控制audio標(biāo)簽的顯示： -->
<style type="text/css">
audio{
display: none;
}
</style>
</body>
</html>*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
