css - 带放大边框的图像

Question

<分区>

Answer 1

这可以通过在每个包装器中插入两个图像来实现。一张用于模糊背景，一张用于主图像。此外，而不是使用 <img>标签，我们使用常规 <div> s 在图像显示方面具有更大的灵 active 。

<div class="wrapper">
  <div class="background" style="background-image: url('...')"></div>
  <div class="image" style="background-image: url('...')"></div>
</div>

包装器必须是定位元素(即 position 设置为除 static 之外的任何值)，以便给定 position: absolute; 的子元素将相对于包装器定位。包装器还必须隐藏任何溢出。

.wrapper {
  position: relative; /* Required */
  overflow: hidden;   /* Required */
  width: 400px;       /* Arbitrary */
  height: 500px;      /* Arbitrary */
}

接下来，子元素将被绝对定位并覆盖包装的整个宽度和高度。您必须确保 <div class="background">出现在 <div class="image"> 之前在 HTML 中，否则您必须显式设置 z-index在 CSS 中的每个元素上确保 <div class="image">呈现在顶部。

/* Required */
.background,
.image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: center center;
}

现在为 div.background ，我们将它放大到比容器宽 1.5 倍，添加一个滤镜来模糊图像并稍微降低不透明度。您可以调整这些以达到您想要的效果。

/* Personal Preference */
.background {
  background-size: 150% auto;
  filter: blur(10px);
  opacity: 0.9;
}

设置 background-size 时的 div.background , 请确保您只指定一个维度的大小，以便图像保持其纵横比。例如:

/* Good */
.background {
  background-size: 200% auto;
}
.background {
  background-size: auto 200%;
}

/* Bad */
.background {
  background-size: 200% 200%;
}

最后为 div.image ，我们只需要告诉它如何缩放主图像。这两个选项都保留了图像的纵横比，但提供了不同的大小调整结果:

.image {    
  /* Will only scale as large as the image itself */
  background-size: auto;
}

/* OR */

.image {    
  /* Scales until image hits one of the sides of the container */
  background-size: contain;    
}

举个例子:

body {
  background: #222; 
}

.wrapper {
  position: relative;
  width: 400px;
  height: 500px;
  overflow: hidden;
}

.background,
.image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: center center;
}

.background {
  background-size: 150% auto;
  filter: blur(10px);
  opacity: 0.9;
}

.image {
  background-size: contain;
}

<div class="wrapper">

  <div 
   class="background" 
   style="background-image: url('https://loremflickr.com/250/500/face')"
  ></div>

  <div 
   class="image" 
   style="background-image: url('https://loremflickr.com/250/500/face')"
  ></div>

</div>