CSS - 如何使用CSS模糊图像的左侧和右侧

Question

我试图在整页图片的左侧和右侧创建模糊效果，但我不知道如何去做。我希望在这里实现的一个例子。 http://www.uchicago.edu/。

我希望他们看起来像这样。

Answer 1

你可以这样做。尝试左右不透明度值和颜色。

.container {
  position: relative;
  display: inline-block;
}

.left, .right {
  position: absolute;
  width: 50px;
  top: 0;
  bottom: 0;
  background: white;
  opacity: 0.5;
}

.right {
  right: 0;
}

<div class="container">
  <div class="left"></div>
  <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" alt="" />
  <div class="right"></div>
</div>

Answer 2

他们是这样做的。使图像的父组件具有此css：

   background-image: url(//d3qi0qp55mx5f5.cloudfront.net/www/i/features/20170710_Poetry_Family.jpg?mtime=1498506744);
  position: absolute;
   width: 110%;
  height: 110%;
   -webkit-filter: blur(5px); 
 filter: blur(5px); 

Answer 3

你甚至可以使用伪选择器:before和:after，

来做到这一点

＆＃13;

＆＃13;

div {
  width: 100%;
  height: 300px;
  background: url("http://lorempixel.com/300/300/sports/");
  background-size: 100% 100%;
  position: relative;
}

div:before {
  content: "";
  position: absolute;
  width: 30px;
  height: 100%;
  left: 0px;
  top: 0;
  background: rgba(215, 215, 215, 0.7);
}

div:after {
  content: "";
  position: absolute;
  width: 30px;
  height: 100%;
  right: 0px;
  top: 0;
  background: rgba(215, 215, 215, 0.7);
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

我可以通过pseudo-element，插入box-shadow和颜色匹配的组合来实现所需的效果。

伪元素是叠加层，您添加box-shadow属性并将其设置为inset以向内渲染阴影。您还可以设置所需模糊量（太多元素上的模糊太多会导致性能下降）

其余的只是调整元素大小以仅渲染两侧的效果。

＆＃13;

＆＃13;

.blur {
  position: relative;
  width: 300px;
  height: 300px;
}

.blur:after {
  content: "";
  width: 100%;
  height: 135%;
  position: absolute;
  top: -30px;
  left: 0;
  overflow: hidden;
  box-shadow: inset 0 0 15px 15px white;
}

＆＃13;

<div class="blur">
  <img src="https://unsplash.it/300/300">
</div>

＆＃13;

＆＃13;

＆＃13;

您还可以使用filter属性生成更精细的效果，如下所示：

＆＃13;

＆＃13;

.blur {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 auto;
}

.blur:after {
  background: url("https://unsplash.it/300/300");
  background-size: cover;
  content: "";
  transform: scale(1.15,1);
  width: 100%;
  height: 100%;
  opacity:.9;
  position: absolute;
  top: 0;
  left: 0;
  filter: blur(10px) saturate(1.5);
  z-index: -1
}

＆＃13;

<div class="blur">
  <img src="https://unsplash.it/300/300">
</div>

＆＃13;

＆＃13;

＆＃13;

但这是性能沉重的not supported on all browsers。

Answer 5

如果你的html是由脚本生成的，你可以在彼此的顶部使用相同的图像两次，一个可以模糊和重新缩放：

基本CSS幻灯片放映中的示例

figure {
  font-size: 1rem;
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 0;
}

figure img,
figcaption {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}

figure img:first-child {
  filter: blur(2px) saturate(50%);
  width: 500px;
  position: static;
}

figcaption {
  bottom: 0;
  background: rgba(255, 255, 255, 0.75);
  height: 67px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

div {
  width: 497px;
  height: 316px;
  border: solid;
  overflow: hidden;
  font-size: 0;
  margin: auto;
  position: relative;
}

figure {
  position: absolute;
  transition: left 0.5s;
  left: 0;
}

figure+figure {
  left: 500px;
}

figure:focus {
  left: -500px;
  z-index: 2;
}

figure:focus+figure {
  left: 0;
  z-index: 2;
}

Click image to slide to next one
<div>
  <figure tabindex="0">
    <img src="http://lorempixel.com/400/250/people/1" />
    <img src="http://lorempixel.com/400/250/people/1" />
    <figcaption>
      people 1, click or tab to show next
    </figcaption>
  </figure>
  <figure tabindex="0">
    <img src="http://lorempixel.com/400/250/people/2" />
    <img src="http://lorempixel.com/400/250/people/2" />
    <figcaption>
      people 2, click to next
    </figcaption>
  </figure>
  <figure tabindex="0">
    <img src="http://lorempixel.com/400/250/people/3" />
    <img src="http://lorempixel.com/400/250/people/3" />
    <figcaption>
      people 3, click to next
    </figcaption>
  </figure>
  <figure tabindex="0">
    <img src="http://lorempixel.com/400/250/people/4" />
    <img src="http://lorempixel.com/400/250/people/4" />
    <figcaption>
      people 4
    </figcaption>
  </figure>
  <figure tabindex="0">
    <img src="http://lorempixel.com/400/250/people/5" />
    <img src="http://lorempixel.com/400/250/people/5" />
    <figcaption>
      people 5, click to next
    </figcaption>
  </figure>
  <figure tabindex="0">
    <img src="http://lorempixel.com/400/250/people/6" />
    <img src="http://lorempixel.com/400/250/people/6" />
    <figcaption>
      people 6, click to next
    </figcaption>
  </figure>
  <figure tabindex="0">
    <img src="http://lorempixel.com/400/250/people/7" />
    <img src="http://lorempixel.com/400/250/people/7" />
    <figcaption>
      people 7, click to next
    </figcaption>
  </figure>
  <figure tabindex="0">
    <img src="http://lorempixel.com/400/250/people/8" />
    <img src="http://lorempixel.com/400/250/people/8" />
    <figcaption>
      people 8, click to next
    </figcaption>
  </figure>
  <figure tabindex="0">
    <img src="http://lorempixel.com/400/250/people/9" />
    <img src="http://lorempixel.com/400/250/people/9" />
    <figcaption>
      people 9, click me to start again
    </figcaption>
  </figure>
</div>

Answer 6

您可以使用线性渐变：

#circle {
    width: 100px;
    height: 100px;
    background: red;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

.bg {
  width: 100%;
  height: 300px;
  background: linear-gradient(to right, rgba(215, 215, 215, 0.7) 10%, transparent 10%, transparent 90%, rgba(215, 215, 215, 0.7) 90%), url("http://lorempixel.com/1200/600/animals/") no-repeat;
  background-size: cover;
  position: relative;
}

或两个插入框阴影：

<div class="bg"></div>

.bg {
  width: 100%;
  height: 300px;
  background: url("http://lorempixel.com/1200/600/animals/") no-repeat;
  background-size: cover;
  box-shadow: inset 10vw 0 0 rgba(215, 215, 215, 0.7), inset -10vw 0 0 rgba(215, 215, 215, 0.7);
  position: relative;
}