Fatal编程技术网
  • html/
  • Html 我可以只为div的背景图像设置不透明度吗？

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

html css

Html 我可以只为div的背景图像设置不透明度吗？,html,css,background,background-image,Html,Css,Background,Background Image,假设我有 <div class="myDiv">Hi there</div> 所有内容都将是低透明度的，我不希望这样 因此，我的问题是–我如何获得低透明度背景图像和全不透明文本？不，这是无法做到的，因为不透明度会影响整个元素，包括其内容，并且无法改变此行为。您可以使用以下两种方法解决此问题 中学部 将另一个div元素添加到容器中以保存背景。这是最跨浏览器友好的方法，甚至可以在IE6上使用 HTML 你好 CSS .myDiv{ 位置：相对位置； z指数：1； } .

假设我有

<div class="myDiv">Hi there</div>
所有内容都将是低透明度的，我不希望这样

因此，我的问题是–我如何获得低透明度背景图像和全不透明文本？

不，这是无法做到的，因为
不透明度
会影响整个元素，包括其内容，并且无法改变此行为。您可以使用以下两种方法解决此问题

中学部 将另一个
div
元素添加到容器中以保存背景。这是最跨浏览器友好的方法，甚至可以在IE6上使用

HTML


你好
CSS

.myDiv{
位置：相对位置；
z指数：1；
}
.myDiv.bg{
位置：绝对位置；
z指数：-1；
排名：0；
底部：0；
左：0；
右：0；
背景：url（test.jpg）中心；
不透明度：.4；
宽度：100%；
身高：100%；
}
看

：before和：：before伪元素 另一个技巧是使用css2.1
：before
或css3
：before
伪元素
:before
伪元素在IE版本8中受支持，而
:before
伪元素根本不受支持。这将有望在第10版中得到纠正

HTML


你好
CSS

.myDiv{
位置：相对位置；
z指数：1；
}
.myDiv:以前{
内容：“；
位置：绝对位置；
z指数：-1；
排名：0；
底部：0；
左：0；
右：0；
背景：url（test.jpg）中心；
不透明度：.4；
}
附加说明 由于
z-index
的行为，您必须为容器设置z-index，并为背景图像设置负
z-index

测试用例 请参阅JSFIDLE上的测试用例：

css html 
放入您的div内容
所以这里有另一种方法：

背景图像：线性渐变（rgba（255255,0.5），rgba（255255,0.5）），url（“your_image.png”）；
这可以通过对文本Hi使用不同的div类来完成

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


你好
现在可以将样式应用于标记。对于bg类，则为。
我确信它很好

没有一个解决方案对我有效。如果其他一切都失败了，将图片上传到Photoshop并应用一些效果。5分钟，而不是这么多时间

我实现了，但能够删除一些东西使其更简单，并且仍然有效。可能是2017版的html/css

html:

大家好，我做了这个，效果很好

var画布，ctx；
函数init（）{
canvas=document.getElementById（'color'）；
ctx=canvas.getContext（'2d'）；
ctx.save（）；
ctx.fillStyle='#bfbf'/#00843D//118846
ctx.fillRect（0,0490490）；
ctx.restore（）；
}
部分{
高度：400px；
背景：url(https://images.pexels.com/photos/265087/pexels-photo-265087.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
背景重复：无重复；
背景位置：中心；
背景尺寸：封面；
位置：相对位置；
}
帆布{
宽度：100%；
高度：400px；
不透明度：0.9；
}
#正文{
位置：绝对位置；
排名前10%；
左：0；
宽度：100%；
文本对齐：居中；
}
.中{
文本对齐：居中；
}
截面小{
背景色：#262626；
填充：12px；
颜色：白烟；
字母间距：1.5px；
}
第一节{
颜色：白色；
背景颜色：灰色；
}
第h1节{
不透明度：0.8；
}

韵律学
评估
在马尔卡的网络上，我们可以看到一种新的生活方式。
量度及；网状物


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

注意，我在那里有评论（在Phil的回答下），显示了一种使用css不透明度的方法，如果这是首选方法的话。（）这要简洁得多，而且我相信完全一样。当涉及到使用z指数的负值时，我非常偏执。。但是，我不能对结果提出异议。然而，我会添加
宽度：100%；身高：100%
到
.bg
，这样ie6就可以在父div中传播bg。我认为有一个css3技巧我错过了，但这也很棒@洛勒罗说得好
z-index
是一种痛苦，但只要你给父母一个正的索引，这应该是相对安全的。@Alon如果你检查我在你的问题帖子下写的评论。我已经链接到另一个问题，有几个其他选项，包括rgba，这是css3选项。这是一个很好的老把戏@Alon I使用
：：before
伪元素添加了另一个方法。这就是你要找的吗？@jj：因为当时对
线性渐变的支持非常有限。我写的答案已经超过4年了；）也许你可以给你的问题添加一条评论或一点更新，告知这是一个新的好方法。4年后见，了解新的更新；）@jj：实际上，这种解决方案并不能使图像透明。它只会在上面添加一个透明度为50%的白色层。因此，这不是问题的有效答案。我认为我们可以同意，它达到了问题的目的，所以是的，这是问题的有效答案。是的。。这个答案几乎是最简单的。。否则，使用绝对值进行定位会变得一团糟。这与我的回答中的“二次div”相同，唯一的区别是您省略了z索引（这可能在今天表现不同，也可能取决于浏览器）。但相信浏览器的行为符合预期通常是个坏主意。

<div> put your div content</div>



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



<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>



#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%;
}



<!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>