如何改变一个元素的颜色,是在css的背景图像前面?



我在正文中放了一张背景图片。我的菜单框也有不同的颜色。我不想在菜单框中看到图像,在CSS中怎么做呢?下面是我的代码。

谢谢你,Avi

body{
font-family: sans-serif;
background-image: url("coffee_beans.jpeg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.menu{
position: relative;
border: 2px solid red;
max-width: 613px;
width: 100%;
margin: auto;
background-color: rgba(255, 189, 109, 0.395);    
}

也许你可以试着去掉background-color的alpha,它不会变成透明的背景。

.menu{
background-color: rgb(255, 189, 109);    
}

如果你必须保持背景色为透明,你可以在。menu上再创建一个图层div

body{
font-family: sans-serif;
background-image: url("https://dl.fujifilm-x.com/global/products/cameras/x-t3/sample-images/ff_x_t3_002.JPG");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.menub{
position: relative;
border: 2px solid red;
max-width: 613px;
width: 100%;
height:100px;
margin: auto;
background-color: white;
}
.menu{
width: 100%;
height:100px;
background-color: rgba(255, 189, 109,0.382);    
}
<html>
<body>
<div class="menub">
<div class="menu"></div>
</div>
</body>
</html>

相关内容

  • 没有找到相关文章