我可以只为div的背景图像设置不透明度吗？

问题描述 投票：0回答：9

假设我有

<div class="myDiv">Hi there</div>

我想放置一个 

background-image
并给它一个 
opacity
的 
0.5
– 但我希望我写的文本具有完全不透明度 (
1
)。

如果我会这样写CSS

.myDiv { opacity:0.5 }

一切都将处于低不透明度——我不希望这样。

所以我的问题是 – 如何获得具有完全不透明文本的低不透明度背景图像？

html css background background-image
9个回答
203
投票

所以这是另一种方法：

background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url("your_image.png");
126
投票

不，这是无法完成的，因为 

opacity
会影响整个元素（包括其内容），并且无法更改此行为。您可以通过以下两种方法解决此问题。

二级分区

向容器添加另一个 

div
元素以容纳背景。这是跨浏览器最友好的方法，甚至在 IE6 上也可以工作。

HTML

<div class="myDiv">
    <div class="bg"></div>
    Hi there
</div>

CSS

.myDiv {
    position: relative;
    z-index: 1;
}

.myDiv .bg {
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(test.jpg) center center;
    opacity: .4;
    width: 100%;
    height: 100%;
}

参见 jsFiddle 上的测试用例

:before 和 ::before 伪元素

另一个技巧是使用 CSS 2.1 

:before
或 CSS 3 
::before
伪元素。 IE 从版本 8 开始支持 
:before
伪元素，而 
::before
伪元素根本不支持。这有望在版本 10 中得到纠正。

HTML

<div class="myDiv">
    Hi there
</div>

CSS

.myDiv {
    position: relative;
    z-index: 1;
}

.myDiv:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(test.jpg) center center;
    opacity: .4;
}

补充说明

由于 

z-index
的行为，您必须为容器设置 z 索引，并为背景图像设置负值 
z-index
。

测试用例

参见 jsFiddle 上的测试用例：

9
投票

CSS

div { 
    width: 200px;
    height: 200px;
    display: block;
    position: relative;
}

div::after {
    content: "";
    background: url(image.jpg); 
    opacity: 0.5;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}

html

<div> put your div content</div>
0
投票

我实现了Marcus Ekwall 的解决方案，但能够删除一些东西以使其更简单，并且它仍然有效。也许是 2017 版本的 html/css？

html:

<div id="content">
  <div id='bg'></div>
  <h2>What is Lorem Ipsum?</h2>
  <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
    book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
    desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

CSS：

#content {
  text-align: left;
  width: 75%;
  margin: auto;
  position: relative;
}

#bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url('https://static.pexels.com/photos/6644/sea-water-ocean-waves.jpg') center center;
  opacity: .4;
  width: 100%;
  height: 100%;
}

https://jsfiddle.net/abalter/3te9fjL5/

0
投票

大家好，我这样做了并且效果很好

	var canvas, ctx;

		function init() {
			canvas = document.getElementById('color');
			ctx = canvas.getContext('2d');

			ctx.save();
			ctx.fillStyle = '#bfbfbf'; //  #00843D   // 118846
			ctx.fillRect(0, 0, 490, 490);
			ctx.restore();
		}
section{
		height: 400px;
		background: url(https://images.pexels.com/photos/265087/pexels-photo-265087.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		position: relative;
	
}

canvas {
	width: 100%;
	height: 400px;
	opacity: 0.9;

}

#text {
	position: absolute;
	top: 10%;
	left: 0;
	width: 100%;
	text-align: center;
}


.middle{
	text-align: center;
	
}

section small{
	background-color: #262626;
	padding: 12px;
	color: whitesmoke;
  letter-spacing: 1.5px;

}

section i{
  color: white;
  background-color: grey;
}

section h1{
  opacity: 0.8;
}
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Metrics</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">  
</head>  
  
<body onload="init();">
<section>
<canvas id="color"></canvas>

<div class="w3-container middle" id="text">
<i class="material-icons w3-highway-blue" style="font-size:60px;">assessment</i>
<h1>Medimos las acciones de tus ventas y disenamos en la WEB tu Marca.</h1>
<small>Metrics &amp; WEB</small>
</div>
</section>

0
投票

使用具有 100% 宽度和高度的内部绝对元素的方法对我来说不起作用，因为布局如何变化以及跟踪是多么不切实际。

所以我想出了一个解决方案；使用设置的 alpha 将图像渲染到画布，然后从画布获取 blob URL。

async function generateDataUrlFromImage(src: string, opacity: number) {
  return new Promise(async (resolve) => {
    const img = document.createElement('img');
    img.src = src;
    await img.decode();
    const canvas = document.createElement('canvas');
    canvas.width = img.naturalWidth;
    canvas.height = img.naturalHeight;
    const ctx = canvas.getContext('2d')!;
    ctx.globalAlpha = opacity / 100;
    ctx.drawImage(img, 0, 0);
    canvas.toBlob((blob) => {
      resolve(URL.createObjectURL(blob!));
    });
  });
}

不是最有效的，但它在布局方面是万无一失的，因为你真的可以使用背景图像。对于其他图像来说，它的性能可能不够，我需要使用的图像是一个小的 150x150px 图案，所以它已经足够好了；我把它放在大约 20ms 处。

-1
投票

这可以通过对文本 Hi There... 使用不同的 div 类来完成

<div class="myDiv">
    <div class="bg">
   <p> Hi there</p>
</div>
</div>

现在您可以将样式应用到

标签。否则对于 bg 类。 我确信它工作得很好

-1
投票

所有解决方案都不适合我。如果一切都失败了，请将图片放入 Photoshop 并应用一些效果。 5 分钟与这么多时间相比......

-1
投票
<!DOCTYPE html>
<html>
<head></head>
<body>
<div style=" background-color: #00000088"> Hi there </div>
<!-- #00 would be r, 00 would be g, 00 would be b, 88 would be a. -->
</body>
</html>

包含 4 组数字将使其成为 rgba，而不是 cmyk，但任何一种方式都可以（rgba= 00000088，cmyk= 0%, 0%, 0%, 50%）

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.