本文主要介绍了 CSS 中处理图片时容易被忽略的细节,通过阅读本文,你将了解到图片拉伸如何处理、给透明图像添加阴影、滤镜、将背景图像设置为文本颜色等内容。
文章目录
- 1.图片拉伸问题处理
- 2.透明图像的阴影
- 3.滤镜
- 4.背景图像设置为文本颜色
1.图片拉伸问题处理
日常经常遇到图片列表,而图片大小不一。
(1)为了使图片不被拉伸,之前我是这么操作的:给 <img>
标签外边多加个 <div>
标签,然后 div 设置长宽,再把 img 的宽度设置为 100%,这样做图片不会被拉伸,代码如下:
<style>
div{
width:200px;
height:300px;
}
img{
width:100%;
}
</style>
<body>
<div>
<img src="try.png" />
</div>
</body>
(2)上面是一种方法,但是这里推荐的是更优的办法:使用 object-fit 属性设置图片的拉伸效果
。
示例:使用 object-fit 属性使图片垂直居中显示,并且图片不被拉伸。为了看清楚,所以给 img 加了个边框。这种方法不需要添加额外的 dom ,更简洁。
<style>
img{
width:200px;
height:300px;
border: 1px solid;
object-fit: contain;
}
</style>
<body>
<img src="try.jpg" />
</body>
2.透明图像的阴影
文字阴影、盒子阴影大家都见过,透明图片的阴影有见过不?现在就见到了!
通过 drop-shadow 属性跟随给定图像的 alpha 通道。因此,阴影基于图像内部的形状,而不是显示在图像外部。
①原图,是一张透明背景的图片。
②添加 box-shadow
属性。
③添加 属性 filter: drop-shadow(2px 4px 8px #3723a1);
在线演示地址:https://codepen.io/OMGZui/pen/bGLjJNO
3.滤镜
CSS 中 filter
属性巨好用!一秒变灰呀…
仅需要给要加滤镜的元素添加属性:filter
。如上图中,加了 filter: grayscale(1);
后图片就变灰色了。
filter 属性还有很多值,浏览器控制台给元素加上属性就能立马看到效果👍
4.背景图像设置为文本颜色
PPT 中这种效果不少见,CSS也能做出来!
<style>
p{
background-image: url('1.png');
background-clip:text;
-webkit-background-clip:text;
color:transparent;
font-size:150px;
}
</style>
<body>
<p>Hello!</p>
</body>