【css】CSS改变背景图片的颜色样式
阅读: 36 回复: 1

发布于:2020-10-25

问题描述

CSS背景样式图片改变颜色,重新赋予背景图片新颜色。

原图: 

要求将图片变亮。


解决方案

解决方案:

1. 用ps调整色相饱和度,亮度即可。

2. 用css3的滤镜demo代码如下:

<!DOCTYPE html>
<html lang="zh">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>filter</title>
<img src="./logo-bg.png"/>
<style>
.con {
background: url(./logo-bg) no-repeat;
background-size: contain;
filter:brightness(120%); /*只要调整这个值即可*/
/* filter: hue-rotate(-45deg); 可以改变图片颜色*/
/* filter: drop-shadow(#0033FF 2px 2px); 给图片增加阴影效果*/
/* 动画 */
/* animation: pulse 5s linear infinite; 通过动画效果改变颜色*/
}
@keyframes pulse {
from {
filter: hue-rotate(0);
}

to {
filter: hue-rotate(360deg);
}
}
</style>
</head>

<body>
<div></div>
</body>

</html>


录屏实操

录屏暂未发布,请耐心等待

发布于:2020-7-21 1楼#

问题已解决