圖片與圖片上的文字設置不同的透明度的兩種方法：
第一種方法：背景圖+定位+background: url(timg.jpg）no-repeat;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.d1 {
background: url(timg.jpg)no-repeat;
background-size: cover;
width: 500px;
height: 500px;
position: relative;
}
.d2 {
position: absolute;
left: 0;
right: 0;
top:0;
bottom: 0;
width: 500px;
height: 500px;
line-height: 50px;
text-align: center;
background: rgba(225,225,225,0.3);
}
</style>
</head>
<body>
<div class="d1">
<div class="d2">我是吳亦凡</div>
</div>
</body>
</html>
效果圖一：
第二種方法：背景圖+偽類+flite:blur(5px)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.d1 {
width: 300px;
height: 300px;
line-height: 50px;
text-align: center;
}
.d1:before {
background: url(timg.jpg）no-repeat;
background-size: cover;
width: 500px;
height: 500px;
content: "";
position: absolute;
top: 0;
left: 0;
z-index: -1;
-webkit-filter:blur(5px);
filter: blur(px);
}
</style>
</head>
<body>
<div class="d1">我是吳亦凡</div>
</body>
</html>
效果圖二：
需要知道的幾個屬性：
- background: url(timg.jpg）no-repeat;：將一張圖片設置為html的背景圖，並且不平鋪。如果平鋪的話將占滿整個網頁。
- background-size: cover;：background-size的cover特定值會保持圖像本身的寬高比例，將圖片縮放到正好完全覆蓋定義背景的區域。
- z-index: -1;：讓一個層在所有層的下面當背景的方法。
- -webkit-filter:blur(5px);：-webkit-filter，其作用通常是進行圖片處理，blur(5px)是對圖像進行模糊處理，此處像素為5px。
- filter: blur(px);用濾鏡對文字進行模糊處理。
- background: rgba(225,225,225,0.3);通過改變最后一個值來設置背景圖片的透明度。
