css 蒙版_简单CSS蒙版：创建图像小插图

css 蒙版

Vignetting is the technique of fading of an image at its edges, often seen in wedding photographs, or in shots taken by a toy camera. In essence, it creates an inner frame for an image.

渐晕是在婚礼照片或玩具相机拍摄的照片中经常出现的图像边缘褪色的技术。 本质上，它为图像创建一个内部框架。

We can implement a similar technique to that used by the previous example of creating simple image masks; by maximizing the border-radius, you can create elliptical cut-out effects, as shown above.

我们可以实现与前面创建简单图像蒙版的示例相似的技术; 通过最大化border-radius ，可以创建椭圆形的抠像效果，如上所示。

Fading the inner edge of the image is a little trickier: we can’t use inner shadow on an img tag, as the shadow will be presented behind the image, and be completely obscured. Instead, we’ll set the image as the background for a paragraph, for reasons that will become apparent later. Right now, the paragraph is empty:

对图像的内部边缘进行淡化有点棘手：我们不能在img标签上使用内部阴影 ，因为阴影将呈现在图像后面并被完全遮盖。 取而代之的是，我们将图像设置为段落的背景 ，原因稍后会变得很明显。 现在，该段为空：

<p id="vignette"></p>

And the CSS, with the width and height of the image we are going to put in the background of the paragraph. Right now, I’m keeping to the minimum CSS needed, with no concessions for older browsers:

还有CSS，以及图像的width和height ，我们将其放在段落的背景中。 现在，我将CSS保持在最低要求，而旧版浏览器没有任何优惠：

p#vignette { 
	width: 500px; height: 188px;
	background-image: url(golden-gate-bridge.jpg); 
	border-radius: 50%;
	box-shadow: inset 0 0 60px rgba(0, 0, 0, 1);
	overflow: hidden;
}

That works very well, but lacks accessibility. As background images cannot have alt or title applied, it behooves us to fill the paragraph with an explanation of what the image represents:

效果很好，但缺乏可访问性 。 由于背景图片无法应用alt图片或title ，因此我们有必要在该段落中添加图片含义的解释：

<p id="vignette">Golden Gate Bridge in fog</p>

And added to our CSS:

并添加到我们CSS中：

p#vignette { 
	width: 500px; height: 188px;
	background-image: url(golden-gate-bridge.jpg);
	border-radius: 50%;
	box-shadow: inset 0 0 60px rgba(0, 0, 0, 1);
	overflow: hidden;
}

That also works, but leaves the text cut off by the edge of the (invisible) border and overflow: hidden. It would be much nicer to have the text in the centre of our vignette, using text-align, and an old trick to vertically centre a single line of text in a box of known height, by using that same height as the value of line-height:

这也可以，但是留下的文字被(不可见)边框的边缘截断并overflow: hidden 。 使用text-align将文本放在小插图的中心会更好，而且还有一个古老的技巧，即通过使用与line-height值相同的高度，将单个文本行垂直居中放置在已知height的框中line-height ：

p#vignette {
	text-align: centre;
	line-height: 180px;
}

If you wanted to keep the text as an ersatz image caption, you could increase line-height to place it lower in the vignette; alternatively, you could make the text disappear entirely using one of several possible techniques. The text should still be read by screen readers, to retain accessibility:

如果您想将文本保留为ersatz图像标题，则可以增加line-height以将其放置在小插图中； 或者，您可以使用几种可能的技术之一使文本完全消失 。 屏幕阅读器仍应阅读文本，以保持可访问性：

p#vignette {
	color: rgba(0, 0, 0, 0);
}

Villa on Lake Como, Italy

意大利科莫湖别墅

Sadly, changing the inner shadow color to white (assuming that the vignette was on a page with a white background) does not effectively “blur” the outer edge of the image as might be expected. That will have to wait for more advanced techniques, discussed presently.

可悲的是，将内部阴影颜色更改为白色(假设小插图位于具有白色背景的页面上)并不能有效地“模糊”图像的外边缘。 这将不得不等待目前讨论的更高级的技术。

By using different turn radius values for each corner of the border, you can make images fit into cut-out “windows”, while (optionally) adding the same technique: think of the shapes of the stanzas of Raphael’s frescoes in the Papal apartments.

通过对边界的每个角使用不同的转弯半径值，可以使图像适合切出的“窗口”，同时(可选)添加相同的技术：考虑教皇公寓中拉斐尔壁画的节的形状。

p#lake-como {
	width: 450px; height: 300px;
	background-image: url('lake-como-villa.jpg');
	border-radius: 50% 50% 10px 10px;
	box-shadow: inset 0 0 100px rgba(0, 0, 0, 1);
}

翻译自: https://thenewcode.com/432/Simple-CSS-Masks-Creating-Image-Vignettes

css 蒙版