片
當我們在制作頁面的時候,通常會遇到圖片的三種表現形式,如下:
1、內容圖片
內容圖片是頁面中真正的內容,沒有內容圖片,就無法完整的理解頁面內容。如淘寶網上的商品展示圖片,這些圖片是網頁的一部分,它們能幫助你決定這個頁面的內容是否是你需要的。
內容圖片
2、布局圖片
布局圖片出現在頁面背景中,要想理解頁面的內容,它們不是必須的。如蘋果官網的這個圖片,沒有這個圖片也能理解頁面上文字描述的內容是什么意思。
布局圖片
3、交互圖片
圖中用紅色框起來的圖片會給你瀏覽頁面的時候帶來一些幫助,如搜索圖片,一看到就知道這里可以搜索想要的東西,購物車圖片可以看到選購的產品,箭頭圖片點擊可以看到更詳細的產品等。
交互圖片
在HTML中我們用 img 標簽創建圖片,英文是image的縮寫。
<img src="" alt="">
內容圖片
布局圖片是在CSS中被創建出來的,使用CSS中的background屬性,如:
1)background-color 定義背景顏色,設置背景圖片時,要始終設置背景顏色,確保背景圖片沒有成功時會顯示一個背景顏色
2)background-image 可以指向一個相對路徑或者絕對路徑來添加圖片。
3)background-repeat可以設置背景是否平鋪在容器中,包含四個關鍵字:
4)background-position 屬性可以控制背景圖片顯示在什么位置,包含兩個關鍵字,如:
background-position:top left 設置圖片顯示在容器的左上角,第一個關鍵字可以是top、center、bottom,第二個關鍵字可以是left、center、right
CSS中和背景相關的屬性可以簡寫在一行中,如:
background: #FF1298 url(images/logo.png) center right no-repeat;
首先是圖片的顏色color,image,position,repeat,CSS屬性能用簡寫就盡量用簡寫,簡寫比分開寫性能更高。
布局圖片
Web上最常用的三種圖像格式
1)Jpeg 可以展示一張照片或者復雜圖像
2)png最適合展示網頁插畫、logo和網頁小圖標
3)gif適合展示網頁插畫、logo和網頁小圖標
建議:
一般情況下用戶交互圖片都是一些小圖標,所以使用png或gif作為用戶交互圖片;使用CSS的background屬性以背景圖片的形式為網頁添加用戶交互圖片;推薦把用戶交互圖片放在同一個文件中,可以提高網絡和服務器性能,如:
交互圖片
交互圖片
具體如何操作呢?后續教頭會通過視頻給大家詳細演示,請繼續關注。
<!DOCTYPE html>
<html>
<head>
<title>html5添加音樂</title>
<meta charset="utf-8">
<!--embed標簽寫在<head>里面的title標簽下-->
<embed src="C:\Users\Administrator\Desktop\告白氣球.mp3" hidden="flase" autostart="true" loop="true">
<!-- 說明:
1、src:文件路徑。
2、hidden="true"表示隱藏音樂播放按鈕,相反使用hidden="false"表示開啟音樂播放按鈕。
3、autostart="true" 表示是打開網頁加載完后自動播放。
4、loop="true"表示 循環播放 如僅想播放一次則為:loop="false" -->
</head>
<body>
<audio autoplay="autoplay" loop="loop" preload="auto" controls="controls"
src="C:\Users\Administrator\Desktop\告白氣球.mp3">
</audio>
<!-- 說明:
1、autoplay="autoplay",則背景音樂將在音網頁打開后就自動馬上播放。
2、controls="controls",則為了在頁面內顯示顯示控件,如播放按鈕。
3、"loop="loop",則是為了使背景音樂重復播放。
4、preload="auto",則音頻在頁面加載的同時進行加載,并預備播放。
5、src="",即是在""內加入背景音樂的保存路徑,如:src=""。
注:若是想播放按鈕隱藏,則使用以下語句:
直接使用css 的display控制audio標簽的顯示: -->
<style type="text/css">
audio{
display: none;
}
</style>
</body>
</html>
這樣一個需求,就是在一個DIV中包含有一個Image標簽,但是在Div標簽中包含有一張背景圖片,設計圖上的樣子是這張背景圖片是有一個透明度的,但是如果直接使用opacity屬性設置的的話就會連Div中的內容的透明度也會受到影響,那么我們如何在HTML中設置div背景圖片的透明度呢?,可以通過以下幾種方法實現。
這是在日常開發中被推薦使用的方法,通過這種方式實現不會影響到div中的其他內容的透明度只會影響它自己背景的透明度,詳細實現如下。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
}
.container::before {
content: "";
background-image: url('your-image.jpg');
background-size: cover;
background-position: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.5; /* 調整透明度 */
z-index: 1;
}
.content {
position: relative;
z-index: 2;
color: white;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
這里是內容
</div>
</div>
</body>
</html>
這種方式比較適合那種需要給背景圖片上添加蒙版的情況,但是筆者嘗試的時候,結果實在是不盡人意。所以還是選擇了上面的推薦方法,不過這種方式要比上面的那種方式實現起來要簡單很多。如下所示。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
height: 200px;
background: rgba(255, 255, 255, 0.5) url('your-image.jpg') no-repeat center center;
background-size: cover;
}
</style>
</head>
<body>
<div class="container">
這里是內容
</div>
</body>
</html>
這種方式實現會影響到整個的div的樣式,也就是說頁面中的內容的透明度也會受到影響,并且這種影響不會被其他樣式所改變。如下所示。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
height: 200px;
background: url('your-image.jpg') no-repeat center center;
background-size: cover;
filter: opacity(0.5); /* 調整透明度 */
}
</style>
</head>
<body>
<div class="container">
這里是內容
</div>
</body>
</html>
以上就是實現如何調整div的背景透明度,在一些特殊場景中我們還可以通過JS的方式來實現。上面的方法中,推薦使用的是偽元素方法,因為它在修改了div背景透明度之后,并不會影響到其他的元素,RGBA色彩添加則是局限于一些色彩華麗的地方使用,而對于一些單色調的內容來講這種方式實現效果不是太好。通過CSS過濾樣式,雖然是最直接的方式,但是如果在div內部有內容的情況下會影響到整個組件體系的樣式。
在實際開發中,我們可以選擇合適的方式來實現這個需求。當然還有其他的實現方式,有興趣的讀者可以留言我們一起討論。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。