黑色覆蓋文本內部沒有不透明度

-1

我正在實現一個類似於中等文本的文本框，其中文本位於框中央，背景爲背景圖像的黑色覆蓋。黑色覆蓋文本內部沒有不透明度

不過，我有讓裏面的文字與背景圖像沒有透明度的效果DIV掙扎。

<div class="blackBackground"> 
    <div class="topicImage opacityFilter" style="background-image: url(https://images.unsplash.com/photo-1444401045234-4a2ab1f645c0?ixlib=rb-0.3.5&q=80&fm=jp&crop=entropy&s=4372cb6539c799269e343dd9456b7eb3);"> 
     <p class="text-inside-image">Fashion</p> 
    </div> 
</div>

這裏是我的CSS：

.blackBackground { 
    background-color: black; 
    z-index: -1; 
} 

.opacityFilter { 
    opacity: 0.8; 
    position: relative; 

} 

.margin-bottom-negsix { 
    margin-bottom: -6px !important; 
} 


.topicImage { 
    padding-bottom: 75%; 
    background-position: 50% 50%; 
    background-repeat: no-repeat; 
    background-size: cover; 
    margin: 0 auto; 
    position: relative !important; 
    height:150px; 
    background-color: rgba(0, 0, 0, 0.8) !important; 

} 

.text-inside-image { 
    position: absolute; 
    top: 20%; 
    left: 35%; 
    color: white; 
    font-size: 24px; 
    font-weight: 500; 
    z-index: 1; 
}

我已經嘗試了幾種解決方案，如CSS - Opaque text on low opacity div? 和How to keep text opacity 100 when its parent container is having opacity of 50

和一對夫婦更，但沒有運氣。

我與我的jsfiddle的進步是在這裏：https://jsfiddle.net/RohitTigga/akz5zng7/1/

爲什麼會發生這種情況，如何解決？

來源

2016-07-11 Rohit Tigga

我一直在試圖設置不透明度的背景，而不是元素;然而，這甚至不能改變不透明度......爲什麼？ –

這是爲什麼被低估？自己解釋一下。我花時間研究解決方案，提供儘可能多的上下文，並放置一個JSFiddle以方便使用。我做錯了什麼？？？？ –

嗨改變你的HTML這樣

HTML

<div class="my-container"> 
    <h1 class="text-inside-image">Fashion</h1> 
    <img src="https://images.unsplash.com/photo-1444401045234-4a2ab1f645c0?ixlib=rb-0.3.5&q=80&fm=jp&crop=entropy&s=4372cb6539c799269e343dd9456b7eb3"> 
</div>

CSS

.my-container { 
    position: relative; 
    background: #5C97FF; 
    overflow: hidden; 
} 
.my-container h1 { 
    padding: 50px; 
    text-align: center; 
    z-index: 2; 
    position: relative; 
    color: #fff; 
} 
.my-container img { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: auto; 
    z-index: 1; 
    opacity: 0.6; 
}

參考https://plnkr.co/edit/YugyLd8H5mQExzF61rA9?p=preview

來源

2016-07-11 02:03:01

你甲肝e在元素上設置半透明背景顏色，然後用背景圖像覆蓋。

如果您希望背景圖像是半透明的，請使用內在半透明的圖像。 PNG圖像格式支持這一點。

來源

2016-07-11 06:22:01 Quentin

黑色覆蓋文本內部沒有不透明度

回答

相關問題