我试图在css中对图像进行叠加,但我遇到了一些我不知道如何解决的问题。 看看这张图片,这是PhotoShop中的一个模型:
但我得到了这个:
正如你所看到的那样,blockquote和text也有不透明度,这是我真正需要解决的唯一问题(模糊不是必需的,但是会欣赏一个很好的例子)
我还创建了一个codepen,其他图像,相同的代码
img.header {
width: 100%;
}
div.wrapper {
position: relative;
/* important(so we can absolutely position the description div */
}
div.description {
height: 100%;
position: absolute;
/* absolute position (so we can position it where we want)*/
bottom: 0px;
/* position will be on bottom */
left: 50%;
width: 50%;
/* styling bellow */
background-color: #cddc39;
color: white;
opacity: 0.4;
/* transparency */
filter: alpha(opacity=60);
/* IE transparency */
}
p.description_content {
padding: 10px;
margin: 0px;
font-size: 30px;
}

<div id="praktijk" class="col s12">
<div class="row pad-top">
<div>
<div class='wrapper'>
<!-- image -->
<img class="header" src='https://www.w3schools.com/w3images/fjords.jpg' />
' />
<!-- description div -->
<div class='description'>
<!-- description content -->
<p class='description_content'>
<blockquote>
This is an example quotation that uses the blockquote tag.
</blockquote>
</p>
<!-- end description content -->
</div>
<!-- end description div -->
</div>
</div>
</div>
</div>
&#13;
答案 0 :(得分:0)
如果您只想将不透明度应用于背景,在这种情况下只是背景颜色,我更喜欢rgba颜色。 请参阅:css color https://www.w3schools.com/cssref/css_colors_legal.asp
要应用此属性,您必须将颜色从十六进制转换为rgb颜色
此处页面为:https://www.webpagefx.com/web-design/hex-to-rgb/
所以你的包装类就是这样:
if a>threshold and a>b and a>c and a>d and a>e:
print ('a is highest and within limit')
CF=a
答案 1 :(得分:0)
img.header { width: 100%;}
div.wrapper {
position: relative;
overflow:hidden;
}
div#imageBlur, div.description {
height: 100%;
position: absolute;
left: 50%;
width: 50%;
}
div#imageBlur {
background-repeat: no-repeat;
background-size: cover;
background-position-y: 8px;
background-position-x: 100%;
-webkit-filter: blur(3px);
filter: blur(3px);
bottom: 8px;
}
div.description {
bottom: 4px;
background-color:rgba(205, 207, 57, 0.4) ;
color: white;
}
p.description_content {font-size: 50px;}
blockquote{
border-left:solid 2px #ffd800;
padding-left:5px;
font-size: 25px;
}
&#13;
<div id="praktijk" class="col s12">
<div class="row pad-top">
<div>
<div class='wrapper'>
<img class="header" src='https://www.w3schools.com/w3images/fjords.jpg' />
<!-- description div -->
<div id="imageBlur" style="background-image: url(https://www.w3schools.com/w3images/fjords.jpg);"></div>
<div class='description'>
<p class='description_content'>
<blockquote>
This is an example quotation that uses the blockquote tag.
</blockquote>
</p>
</div>
</div>
</div>
</div>
</div>
&#13;
答案 2 :(得分:0)
法哈德·巴格罗(Sir Farhad Bagherlo)先生选对了。只需将叠加层的背景色更改为所需颜色和色调的rgb / rgba,然后消除不透明度即可。这使它变得容易。 以下是您可以使用的颜色列表:https://www.december.com/html/spec/colorrgbadec.html
答案 3 :(得分:-1)
哦,对不起,我没看到模糊元素 如果您只想使背景模糊,则不得将文字放在背景中。取而代之的是2 div:
首先将div作为背景并过滤模糊,然后设置位置:绝对,完全宽度和高度。别忘了将 position:relative 设置为父级;
第二个div作为文本
我希望这会有所帮助