使背景图像半透明

-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

使背景图像半透明

回答

相关问题