如何使背景图像顶部的透明背景颜色移至底部?
Posted
技术标签:
【中文标题】如何使背景图像顶部的透明背景颜色移至底部?【英文标题】:How do I make a transparent background-color that is on top of a background-image go to bottom? 【发布时间】:2017-10-13 21:02:44 【问题描述】:好的,我的问题是,我在图像背景之上有一个半透明的背景颜色。但是当电脑屏幕变大并且页面垂直变长然后水平变长时,背景颜色会在内容结束后停止。 示例:background-color end before the end of the page. 我到处寻找并尝试了所有方法(高度:100%;高度:100vh;底部:0;边距:0;等等)。 100% 什么都不做,当使用 100vh 时,当我向下滚动时,背景颜色会停止,底部/边距:0;什么都没有。 我使用的代码是这样的。
html
background: url(../images/back1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
body
background-color: rgba(0, 34, 62, 0.7);
margin: -0.5px;
font-family: verdana, sans-serif;
color: #b9c8d4;
text-align: center;
要查看网站和整个代码,请访问:http://bienivitesse.com/juluwarlu/ 如果有人知道解决此问题的任何方法,请告诉我。
【问题讨论】:
【参考方案1】:您已将主背景直接应用于html
标记。虽然可能,但直接对其进行造型并不是一个好主意,为了良好的实践,请始终使用 body 或直接后代。
我认为您不能使用 background
属性在图像上叠加颜色,但您可以做的是 - 您可以使用 css pseudo-elements 设置蓝色背景。
您将不得不摆弄z-index
属性以使 div 以正确的顺序出现,因此它们也不会被卡在颜色之下。
例如
html
font-family: Arial, sans-serif;
.container
background: url('http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg') no-repeat center center/cover;
padding-bottom: 20rem;
position: relative;
z-index: 1;
.container::before
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 34, 62, 0.7);
.wrapper
width: 70%;
margin: 0 auto;
z-index: 2;
position: relative;
.content
padding: 4rem;
color: #fff;
background: purple;
z-index: 3;
<div class="container">
<div class="wrapper">
<div class="content">CONTENT</div>
</div>
</div>
【讨论】:
我这样做了,但同样的问题仍然存在。我要做的是让半透明背景颜色粘在页面底部。使其完全覆盖图像。 即使您的代码示例也显示了我的问题,因为它只显示图层直到内容结束。 (我想我解释错了,但感谢您的帮助) @It'sSoCool ,我刚才明白了,很抱歉造成混乱。更新了我的答案。 非常感谢!差不多就是这样。现在唯一的事情是,通过添加 padding-bottom: 20rem;当页面为宽屏时,页面会一直越过页脚。看,我的问题只有在网站显示在大显示器上时才会发生,浏览器在垂直方向上比水平方向更长,并且内容没有填满整个页面。但是当屏幕较小或水平较长时,我没有问题。所以那时不需要填充。有没有办法只在满足这些条件时添加填充? 我认为这是某种自我造成的问题,但您始终可以将媒体查询断点从窗口宽度/高度设置为另一个。但我建议你只坚持宽度,因为高度总是乱七八糟的。learnlayout.com/media-queries.html以上是关于如何使背景图像顶部的透明背景颜色移至底部?的主要内容,如果未能解决你的问题,请参考以下文章
SwiftUI:如何使列表视图透明?如何更改列表视图背景颜色?