html给一块区域加颜色,css3 – 我想添加一个背景颜色只有我的div的一部分

渐变不一定有褪色,这是一个误解,假设你希望你的div从顶部开始是70％的红色(实体),你的CSS将会是.

background-image: linear-gradient(top,red,red 70%,transparent 70%,transparent 100%)

两种方法：

渐变：

div{

width:200px;

height:200px;

margin:50px auto;

border:4px solid rgb(50,50,50);

background-image: linear-gradient(top,transparent 100%);

background-image: -webkit-linear-gradient(top,transparent 100%)

}

没有渐变

div{

position:relative;

z-index:1;

width:200px;

height:200px;

margin:50px auto;

border:4px solid rgb(50,50);

}

div:before{

position:absolute;

z-index:-1;

top:0;

left:0;

width:100%;

height:70%;

content:"";

background-color:red;

}