Question

如何在背景图像上添加黑色阴影，阴影从不透明度1开始，逐渐减少到不透明度0，在图像的所有4个边上？（至少50像素的“减少阴影不透明度”.box-shadow仅提供少量阴影，其中不透明度逐渐下降。）

我尝试使用mask-image，例如：-webkit-mask-image: -webkit-gradient(linear, left 85%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));

这会创建所需的阴影，但仅在图像的底部，不确定是否可以在其他3面上创建它。

编辑：阴影应该在里面（我相信如果是盒子阴影）

这样做的目的是让我们用户的封面照片在我们网站的黑色背景上看起来很好，即使他们有更亮的照片。图像内部的阴影应该有助于图像与网站的黑色背景融为一体。

Answer 1

这样的东西？

html,
body {
  height: 100%;
}

div {
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.inner {
  width: 200px;
  height: 200px;
  background-image: url(http://via.placeholder.com/200x200);
  background-size: cover;
  background-position: center center;
  box-shadow: 0px 0px 40px 5px #000000;
}

<div>
  <div class="inner"></div>
</div>

等等，等等......一个声音告诉我页面的背景是深色，深色。阴影应该在元素的内部，从最暗的黑暗开始，然后将淡入图像，就像这样......

html,
body {
  height: 100%;
  background-color: #000000;
}

div {
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.inner {
  width: 200px;
  height: 200px;
  background-image: url(http://via.placeholder.com/200x200);
  background-size: cover;
  background-position: center center;
  box-shadow: 0px 0px 40px 20px #000000 inset;
}

<div>
  <div class="inner"></div>
</div>

那是什么？哇，坚持......我感觉box-shadow应该超级，超级深......就像这样：

html,
body {
  height: 100%;
  background-color: #000000;
}

div {
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.inner {
  width: 200px;
  height: 200px;
  background-image: url(http://via.placeholder.com/200x200);
  background-size: cover;
  background-position: center center;
  box-shadow: 0px 0px 70px 50px #000000 inset;
}

<div>
  <div class="inner"></div>
</div>

）

听起来仍然是精神阅读。所以这是使用linear-gradient的最后一个例子。

html,
body {
  height: 100%;
  background-color: #000000;
}

div {
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.inner {
  width: 200px;
  height: 200px;
  background-image: radial-gradient(circle at center, rgba(0,0,0, 0.1) 0%, #000000 70%, #000000 100%), url(http://via.placeholder.com/200x200);
  background-size: cover, cover;
  background-position: center center, center center;
}

<div>
  <div class="inner"></div>
</div>

Answer 2

可能是将CSS3 box-shadow属性与inset标记一起使用。这会在容器或元素（类似于图像编辑器中有时称为 vignette ）中弹出一个阴影，这个阴影符合元素的比例，所以它可能不是你的＆＃39重新开始。

<强>实施例。 HTML

<div id="container"></div>

<强>实施例。 CSS

#container {
    width:100px;
    height:100px;
    background-image:url(path/to/image.jpg);
    background-size:cover;

    -webkit-box-shadow:inset 0 0 50px #000000;
    box-shadow:inset 0 0 50px #000000;
}

使用垂直和水平偏移值（此处设置为0）可能会产生更有效的结果，例如像这样......

width: 200px;
height: 200px;

box-shadow: inset 0 100px 50px -25px #000000;

...会给人一种垂直渐变的印象，顶部2底部，暗2光。

与往常一样，box-shadow属性优于@ CSS-Tricks。

希望有所帮助。：）

黑色50px阴影从不透明度1开始并以不透明度0结束（逐渐）

2 个答案: