首页代码生成一个div，背景色为渐变深红色到浅红色，再写一个div覆盖住它的一半部分，第二个div的背景透明，要显示出来第一个div的背景色

代码生成一个div，背景色为渐变深红色到浅红色，再写一个div覆盖住它的一半部分，第二个div的背景透明，要显示出来第一个div的背景色

时间: 2023-11-26 10:06:23 浏览: 119

div背景色半透明

可实现div背景色半透明，不是用的filter:alpha(opacity=50);opacity:0.5;属性，而是用的rgba(0,0,0,0.5)，如果用的filter:alpha(opacity=50);opacity:0.5;那么它有个缺点，就是这个div里边的所有子元素也会有半透明效果

你可以使用CSS的`background`属性来设置渐变背景色，然后使用`position`属性和`z-index`属性来控制第二个div容器的位置并使其覆盖住第一个div容器的一半部分。以下是一个代码示例： ```html <!DOCTYPE html> <html> <head> <title>渐变背景色和透明背景色的div容器</title> <style> .container { width: 300px; height: 300px; background: linear-gradient(to bottom, #d9534f, #f5b7b1); } .overlay { position: relative; top: -150px; width: 300px; height: 150px; background-color: transparent; z-index: 1; } </style> </head> <body> <div class="container"></div> <div class="overlay"></div> </body> </html> ``` 解释： - `background: linear-gradient(to bottom, #d9534f, #f5b7b1)`属性用于设置渐变背景色，`to bottom`表示从上到下渐变，`#d9534f`表示起始颜色，`#f5b7b1`表示结束颜色。 - `position: relative`属性用于设置相对定位，`top: -150px`表示向上移动150像素，从而覆盖住第一个div容器的一半部分。 - `background-color: transparent`属性用于设置透明背景色。 - `z-index: 1`属性用于设置堆叠顺序，使第二个div容器在上层。

阅读全文