图像右边缘淡入/模糊CSS [英] Image Right Edge Fade/Blur CSS

问题描述

我有一个简单的CSS相关问题.如何获得如图所示的右端模糊/淡入淡出效果?

I have a simple CSS related question. How do I obtain the right end blur/fade as shown in the image?

推荐答案

两个方法

让我们这样做:

Two methods

Let's make this:

浏览器兼容性: IE 9 +用于 box-shadow.

Browser Compatibility: IE 9 + for box-shadow.

• 在div中放置适当的box-shadow插入

为div提供左填充以使其文本与背景的白色部分对齐(

The div is given left padding to line it's text up with the white part of the background (the box-sizing: border-box essentially absorbs the padding into the width)

div {
  background: url(http://lorempixel.com/output/food-q-c-500-500-8.jpg) no-repeat;
  height: 500px;
  width: 500px;
  border: solid 1px #000;
  padding-left: 300px;
  box-sizing: border-box;
  box-shadow: inset -250px 0 50px 10px #FFF;
}

<div>
  <h1>Title</h1>
  <p>Paragraph</p>
  <a>Link</a>
</div>

浏览器兼容性:IE 9 +用于多个背景图片/IE 10 +用于 CSS线性渐变(IE 9可以通过IE渐变过滤器或部分透明的.png)

Browser Compatibility: IE 9 + for multiple background images / IE 10 + for CSS linear gradients (IE 9 can be supported with an IE gradient filter or a partially transparent .png)

• 为容器div赋予了线性渐变背景，后跟图像背景(以逗号分隔)

• The container div is given a linear-gradient background followed by the image background (separated by a comma)

为div赋予了左填充以使其文本与背景的白色部分对齐(

The div is given left padding to line it's text up with the white part of the background (the box-sizing: border-box essentially absorbs the padding into the width)

div {
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 240px, rgba(255, 255, 255, 1) 290px), url(http://lorempixel.com/output/animals-q-g-500-500-9.jpg) no-repeat;
  height: 500px;
  width: 500px;
  border: solid 1px #000;
  padding-left: 250px;
  box-sizing: border-box;
}

<div>
  <h1>Title</h1>
  <p>Paragraph</p>
  <a>Link</a>
</div>

这篇关于图像右边缘淡入/模糊CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！