html怎么左侧渐入,html-淡出带有图片背景CSS的div标签的侧面

您可以在具有渐变背景的父元素上使用绝对定位的伪元素来实现此目的.您也可以使用一个div达到相同的效果.

更新：在原始问题的编辑3之后,下面使用的彩虹渐变可以替换为图像文件,其原理完全相同.

例

*{box-sizing:border:box;}

body{margin:0;}

.header{

background:radial-gradient(ellipse at center,#242424 0%,#141414 100%);

box-shadow:0px 0px 10px 3px rgba(0,0,0,.75);

height:150px;

position:relative;

}

h1{

color:#fff;

font-family:arial;

font-size:48px;

padding:25px 0 0;

margin:0;

text-align:center;

}

h2{

color:#fff;

font-family:arial;

font-size:24px;

line-height:25px;

margin:0;

text-align:center;

}

#hbaranim{

-webkit-animation:hbaranim_roll linear 10s infinite;

animation:hbaranim_roll linear 10s infinite;

background:linear-gradient(90deg,#f00 0%,#ff0 16.667%,#0f0 33.333%,#0ff 50%,#00f 66.667%,#f0f 83.333%,#f00 100%) 0 0 repeat-x;

background-size:200%;

bottom:10px;

height:5px;

position:absolute;

width:100%;

}

#hbaranim::before,#hbaranim::after{

content:"";

display:block;

height:100%;

position:absolute;

top:0;

width:25%;

z-index:1;

}

#hbaranim::before{

background:linear-gradient(90deg,rgba(20,20,20,1),rgba(20,20,20,0));

left:0;

}

#hbaranim::after{

background:linear-gradient(90deg,rgba(20,20,20,0),rgba(20,20,20,1));

right:0;

}

@-webkit-keyframes hbaranim_roll{

0%{

background-position:0 0;

}

100%{

background-position:200% 0;

}

}

@keyframes hbaranim_roll{

0%{

background-position:0 0;

}

100%{

background-position:200% 0;

}

}

Name of Site

www.site.nl

如果您喜欢冒险,可以在没有嵌套div(Fiddle)甚至没有父div(Fiddle)的情况下进行操作

下面的代码段作为示例,供您等待Ties确认删除子div是一个选项,并作为记录包含在下面.

#hbaranim{

overflow:hidden;

padding:10px 0;

position:relative;

width:100%;

}

#hbaranim #hbarchild{

background-color:#000;

height:20px;

position:relative;

width:8524px;

z-index:1;

}

#hbaranim::before,#hbaranim::after{

content:"";

display:block;

height:20px;

position:absolute;

top:10px;

width:20%;

z-index:2;

}

#hbaranim::before{

background:linear-gradient(90deg,rgba(255,255,255,1),rgba(255,255,255,0));

left:0;

}

#hbaranim::after{

background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,1));

right:0;

}