使背景圖像半透明

-1

我有一個整個頁面和另一個內容div的背景圖像。我想要的是內容div的背景圖像應該是半透明的，以便它下面的一些背景圖像（對於整個頁面）也應該是可見的。
我也嘗試使用圖像編輯器來減少我的.png背景文件的不透明度，但它沒有顯示我下面的背景，而是圖像剛剛變亮。使背景圖像半透明

來源

2016-02-12 Satwik

你也有'背景color'集？如果是，請將其移除。 – alesc

使用僞元素

body { 
 
    background-image: url(http://lorempixel.com/image_output/nature-q-c-1600-1600-10.jpg); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 
div { 
 
    width: 600px; 
 
    height: 500px; 
 
    position: relative; 
 
} 
 
div::before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-image: url(http://lorempixel.com/image_output/city-q-c-600-500-7.jpg); 
 
    opacity: 0.5; 
 
    z-index: -1; 
 
}

<div> 
 
    <h1>Heading Text</h1> 
 
</div>

來源

2016-02-12 12:06:41

但這改變了我不想要的內部文本的不透明度 – Satwik

不，它不。只是僞元素位於文本的頂部。修復了z-index。 –

要透明股利，你可以使用：

.thediv{ 
    background-color: transparent 
}

編輯：半透明的：

.thediv{ 
    background:rgba(255,255,255,0.4); 
}

來源

2016-02-12 11:29:34

默認情況下元素是透明的...... – alesc

HTML

<body> 
    <div></div> 
</body>

CSS

body { 
    background-image: url(https://static.pexels.com/photos/24419/pexels-photo-24419-large.jpg); 
    background-repeat: no-repeat; 
} 

div { 
    width: 600px; 
    height: 500px; 
    background-image: url(https://static.pexels.com/photos/940/sky-sunset-sand-night-large.jpg); 
    opacity: 0.5; 
}

的jsfiddle：https://jsfiddle.net/0jw6c79L/

來源

2016-02-12 11:35:15

但這改變了我不想要的內部文本的不透明度 – Satwik

使背景圖像半透明

回答

相關問題