css实现图片文字标题栏背景过渡效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现图片文字标题栏背景过渡效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> /* layout */ .mural-card { display: grid; align-items: flex-end } .mural-card > * { grid-column: 1; grid-row: 1; } .mural-card picture, .mural-card img { width: 100%; height: 100%; } .mural-card > figcaption { display: grid; grid-template-columns: 1fr auto; align-items: flex-end; grid-gap: 1rem; gap: 1rem } .mural-card > figcaption > h3 { display: grid; grid-gap: .25rem; gap: .25rem; } .mural-card > figcaption > p { grid-column: 2; justify-self: flex-end; width: -webkit-max-content; width: -moz-max-content; width: max-content; display: inline-grid; grid-gap: .5rem; gap: .5rem; grid-auto-flow: column; align-items: flex-end; } /* paint */ .mural-card { margin: 0; border-radius: 1rem; overflow: hidden; position: relative } .mural-card > figcaption { padding-left: 2rem; padding-right: 2rem; padding-top: 4rem; padding-bottom: 1.5rem; color: white; background: linear-gradient(to top, hsla(0, 0%, 0%, 0.9), 75%, hsla(0, 0%, 0%, 0) ); background: linear-gradient(to top, hsla(0, 0%, 0%, 0.9), var(--slider-hint, 75%), hsla(0, 0%, 0%, 0) ) } @media (max-width: 479px) { .mural-card > figcaption { padding-left: 1rem; padding-right: 1rem; padding-bottom: 1rem } } .mural-card > figcaption > h3 > small { font-weight: normal; } .mural-card > figcaption > h3, .mural-card > figcaption > p { margin: 0; } .mural-card > figcaption > p { font-size: 1.4rem; line-height: 1.1 } .mural-card > figcaption > p > svg { fill: white; height: 2rem; } .mural-card.fixed > figcaption { background: linear-gradient(to top, hsla(0, 0%, 0%, 0.9), hsla(0, 0%, 0%, 0) ); } .demo { position: absolute; top: 1rem; left: 0; margin-left: auto; margin-right: auto; background: hsl(0, 0%, 97%); width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; padding: .5rem 1rem; border-radius: 0 2rem 2rem 0; display: flex; grid-gap: .25rem; gap: .25rem; flex-direction: column; box-shadow: 0 2px 5px hsla(0, 0%, 0%, 0.4); } body { display: grid; align-items:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0