在網頁設計中，經常會遇到需要使用圖片作為背景的情景。而有時候，我們需要在圖片上方添加一些文字或其他的內容，但是圖片又太過于突兀，會影響內容的閱讀。這時候，我們就可以使用CSS來控制背景圖片的透明度，使它看起來更為融合。
要控制背景圖片的透明度，我們需要使用CSS的`opacity`屬性。這個屬性默認的取值范圍是0~1，數值越小表示越透明，數值越大表示越不透明。比如，我們設置`opacity:0.5;`就表示將圖片的透明度設置為50%。
但是使用`opacity`屬性有個問題，它不僅會影響到背景圖片的透明度，同時也會影響到其它內容的透明度，比如文字、邊框等。而有時候，我們只想控制背景圖片的透明度，而不影響其他的內容。這時候，我們可以使用CSS的`background-color:rgba(xxx,xxx,xxx,0.x);`來實現。
其中，`rgba()`是一種顏色表示方式，它可以指定紅、綠、藍三種顏色的值，最后一個參數表示透明度，取值范圍也是0~1。比如，`rgba(255,255,255,0.5)`表示顏色是白色，透明度是50%。我們將這個顏色和背景圖片放在同一個元素的背景中，就可以控制背景圖片的透明度了。
下面是一段示例代碼：

<style>
#bg{
background:url(images/bg.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100%;
height:500px;
position:relative;
}
#bg::before{
content:"";
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background-color:rgba(255,255,255,0.5);
}
</style>
<div id="bg">
<h1>這是一段文字</h1>
<p>這是一段內容</p>
</div>

在這個示例中，我們創建了一個ID為`bg`的div元素作為背景，設置了一個背景圖片`bg.png`。為了控制背景圖片的透明度，我們使用了`::before`偽元素，將它的背景顏色設置為白色，透明度設置為50%。
這樣，我們就能在背景圖片上方添加文字、圖片或其他的內容了，而且背景圖片看起來會更加融入整個頁面，不再顯得突兀。