本文主要介绍了 CSS 中处理图片时容易被忽略的细节,通过阅读本文,你将了解到图片拉伸如何处理、给透明图像添加阴影、滤镜、将背景图像设置为文本颜色等内容。


文章目录

  • 1.图片拉伸问题处理
  • 2.透明图像的阴影
  • 3.滤镜
  • 4.背景图像设置为文本颜色


1.图片拉伸问题处理

日常经常遇到图片列表,而图片大小不一。

css图片设置宽高占满容器后换行 css图片调整_css


(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>

css图片设置宽高占满容器后换行 css图片调整_滤镜_02

2.透明图像的阴影

文字阴影、盒子阴影大家都见过,透明图片的阴影有见过不?现在就见到了!

通过 drop-shadow 属性跟随给定图像的 alpha 通道。因此,阴影基于图像内部的形状,而不是显示在图像外部。

css图片设置宽高占满容器后换行 css图片调整_滤镜_03


①原图,是一张透明背景的图片。

②添加 box-shadow 属性。

③添加 属性 filter: drop-shadow(2px 4px 8px #3723a1);

在线演示地址:https://codepen.io/OMGZui/pen/bGLjJNO

3.滤镜

CSS 中 filter 属性巨好用!一秒变灰呀…

css图片设置宽高占满容器后换行 css图片调整_css_04


仅需要给要加滤镜的元素添加属性:filter。如上图中,加了 filter: grayscale(1); 后图片就变灰色了。

filter 属性还有很多值,浏览器控制台给元素加上属性就能立马看到效果👍

4.背景图像设置为文本颜色

PPT 中这种效果不少见,CSS也能做出来!

css图片设置宽高占满容器后换行 css图片调整_html_05

<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>