用css更改背景圖像的不透明度

我想用css更改標題的背景圖像不透明度。請問你能幫幫我嗎。用css更改背景圖像的不透明度

.intro { 
 
    display: table; 
 
    width: 100%; 
 
    height: auto; 
 
    padding: 100px 0; 
 
    text-align: center; 
 
    color: #fff; 
 
    background: url(http://lorempixel.com/1910/500/nature/) no-repeat bottom center scroll; 
 
    background-color: #000; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    background-size: cover; 
 
    -o-background-size: cover; 
 
}

<header class="intro"> 
 
    ... 
 
</header>

來源

2015-10-10 EducateYourself

四個upvotes的東西，你可以在一分鐘內谷歌？不符合OP的用戶名。 – Shikkediel

在現代瀏覽器中，您也可以使用CSS3的'filter'：https://developer.mozilla.org/en-US/docs/Web/CSS/filter – connexo

你可以像Photoshop或GIMP程序改變的不透明度。

或者你可以在css中用opacity做到這一點。但是你可能不希望這樣，因爲你的.intro中會有一些內容，它們也會受到影響。

所以我建議以下解決方案

.intro { 
    position: relative; 
    z-index: 0; 
    display: table; 
    width: 100%; 
    height: auto; 
    padding: 100px 0; 
    text-align: center; 
    color: black; 
    background-color: transparent; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover; 
} 


.intro:after { 
    content : ""; 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background: url('http://www.planwallpaper.com/static/images/canberra_hero_image.jpg'); 
    background-size: cover; 
    width: 100%; 
    height: 100%; 
    opacity : 0.2; 
    z-index: -1; 
}

https://jsfiddle.net/q63nf0La/

基本上你添加:after元素，這將是一個背景圖片，你的位置它absolute（你.intro將需要position:relative;），然後設置z-index和opacity。

來源

2015-10-10 07:19:17 Paran0a

非常感謝您的幫助！現在我想爲另一個div做同樣的事情，但似乎我做錯了什麼。請問你能幫幫我嗎。。下載部分{ 寬度：100％; padding：50px 0; color：#fff; background：url（../ img/bg.jpg）no-repeat center center scroll; background-color：＃000; \t -webkit-background-size：cover; -moz-background-size：cover; background-size：cover; -o-background-size：cover; } – EducateYourself

你可以發佈你目前擁有的jsfiddle嗎？該過程應該與其他元素相同。但是如果你給出完整的例子，我會研究它。 – Paran0a

http://jsfiddle.net/EducateYourself/292zxcqw/ – EducateYourself

沒有CSS屬性背景透明度，但你可以僞造它通過插入僞元素與普通的不透明度背後的元素的確切大小。

.intro { 
 
\t position: relative; 
 
\t z-index: 0; 
 
\t display: table; 
 
\t width: 100%; 
 
\t height: auto; 
 
\t padding: 100px 0; 
 
\t text-align: center; 
 
\t color: #fff; 
 
\t background-color: #000; 
 
} 
 

 
.intro:after { 
 
\t content : ""; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t display: inline-block; 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t opacity : 0.2; 
 
\t z-index: -1; 
 
\t background: url(https://t1.ftcdn.net/jpg/00/81/10/58/240_F_81105881_pmBwtzXqFmtFx6rfhujAqTnhpWZf8fXn.jpg) no-repeat bottom center scroll; 
 
\t background-size: cover; 
 
\t -webkit-background-size: cover; 
 
\t -moz-background-size: cover; 
 
\t background-size: cover; 
 
\t -o-background-size: cover; 
 
}

<header class="intro"> 
 
    ... 
 
</header>

見鏈接here

來源

2015-10-10 07:14:52

雖然這可能在理論上回答這個問題，[** it將更好的**]（// meta.stackoverflow.com/q/8259）在這裏包括答案的基本部分，並提供參考鏈接。如果鏈接頁面發生變化，僅鏈接的答案可能會失效 –

Hello Paulie_D，我編輯了我的答案，現在看起來像，你說的是...... –

另一種方法是，你這個背景圖片文件轉換爲.png格式，大小使用照片編輯程序使原始圖像0.2不透明，但如果你堅持使用CSS，你可以使用下面的方法：

由於CSS不直接支持背景圖像不透明度，因此可以嘗試使用僞類在頁眉上疊加另一個類，並在其上設置不透明度。沿此線的東西應該有所幫助：

<header class="intro"> 
... 
</header> 

.intro { 
    position: relative; 
    background: #5C97FF; 
    overflow: hidden; 
} 
/* You could use :after - it doesn't really matter */ 
.intro:before { 
    content: ' '; 
    display: block; 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
    opacity: 0.6; 
    background-image: url('../img/bg.jpg'); 
    background-repeat: no-repeat; 
    background-position: 50% 0; 
    -ms-background-size: cover; 
    -o-background-size: cover; 
    -moz-background-size: cover; 
    -webkit-background-size: cover; 
    background-size: cover; 
}

來源

2015-10-10 07:21:41 salmanxk

HTML代碼

<header class="intro"> 
<img class="IntroImg" src="../img/bg.jpg"> 
</header>

CSS代碼

.intro introIimg:hover { 
opacity: 1.0;//Set your opacity 
... 

}

希望它會幫助你。

來源

2015-10-10 07:27:24

用css更改背景圖像的不透明度

回答

相關問題