主页 / 问题 / 690165
Accepted
Black Fire
Asked:2020-07-10 02:26:12 +0000 UTC2020-07-10 02:26:12 +0000 UTC

自适应背景阴影效果

  • 772

一般来说，元素的背景图片具有::before制作的半透明阴影效果。当改变浏览器窗口的宽度时，背景图片适配，背景保持固定高度，但在全屏时，由于 background-size: contain ，背景在高度上小于阴影（图片大于阴影）我的显示器）。如何让阴影效果与图像相适应，好吧，在全屏的情况下，恰好在图像上？这是另一个更好理解的例子： https ://codepen.io/Black_Fire/pen/OgBrRO

    header {
  background: url('../img/bg-header.jpg') no-repeat center top;
  -webkit-background-size: contain;
          background-size: contain;
  position: relative;
  height: 810px;
  text-align: center;
}
header::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 60, 0.671);
  content: '';
  z-index: 100;
}
css

1 个回答

  1. Best Answer

    您需要将标头包装在一个特殊的容器中，以保持图像的纵横比。例如，您选择了 1500:810 的宽高比，因此容器具有 padding-bottom: 54%; (810/1500 = 0.54)。

    https://codepen.io/anon/pen/MoPZQM

    <div class="ratio-container">
  <header></header>
</div>

body {
  margin: 0;
}
.ratio-container {
    position: relative;
}
.ratio-container:after {
    content: '';
    display: block;
    height: 0;
    width: 100%;
    /* 810:1500 = 54% */
    padding-bottom: 54%;
}
.ratio-container > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}
header {
  background: url('http://lorempixel.com/1500/810/') no-repeat center top;
  -webkit-background-size: cover;
  background-size: cover;
  text-align: center;
}
header::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 60, 0.671);
  content: '';
  z-index: 1;
}
    • 0

相关问题