〖CSS技巧①〗4个实用的图片处理技巧

最新推荐文章于 2024-06-06 11:24:57 发布

旋转前端皮塔牙

最新推荐文章于 2024-06-06 11:24:57 发布

阅读量822

点赞数 1

分类专栏： CSS系列文章标签： css html 前端

本文链接：https://blog.csdn.net/xzhlg57656/article/details/130159072

版权

CSS系列专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文主要介绍了 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>