笔记大全

css怎么设置背景图片灰度

更新时间：2023-09-29

1. 设置背景图片灰度的原理

设置背景图片灰度，其实就是控制背景图片的饱和度，让其变为灰色调。在CSS中，可以通过CSS3的滤镜属性实现。

background-image: url("example.jpg");
filter: grayscale(100%);

其中，background-image属性设置背景图片的URL，filter属性中的grayscale(100%)表示将背景图片的饱和度设置为100%，即变为灰色。使用滤镜属性可以在不改变图片源文件的情况下实现背景图片的灰度效果。

2. 使用CSS代码设置背景图片灰度

在HTML页面中，可以使用CSS代码设置背景图片灰度效果。首先，需要将背景图作为一个元素的背景，并且需要设置元素的大小和位置。接着，设置元素的滤镜属性为灰度滤镜。最后，使用background-size属性将图片铺满整个元素。

<div class="bg"></div>

.bg {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;

    background-image: url("example.jpg");
    background-size: cover;
    filter: grayscale(100%);
}

在上述代码中，div元素的类名为bg，使用了固定定位将其铺满整个页面。然后，设置了背景图片为example.jpg，并使用background-size: cover使图片铺满整个元素。最后，使用filter: grayscale(100%);将其灰度化。

3. 使用JavaScript代码设置背景图片灰度

除了使用CSS代码进行设置，还可以使用JavaScript代码实现背景图片的灰度效果。首先，需要获取到元素的样式，然后将背景图片转换为灰度图片，最后应用到元素上。

<div class="bg"></div>

.bg {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;

    background-image: url("example.jpg");
    background-size: cover;
}

var bg = document.querySelector('.bg');
var imgUrl = bg.style.backgroundImage.replace(/url\(['"]?(.*?)['"]?\)/gi, '$1');

var img = new Image();
img.src = imgUrl;
img.onload = function() {
    var canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;

    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);

    var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    var data = imageData.data;

    for (var i = 0; i < data.length; i += 4) {
        var r = data[i];
        var g = data[i + 1];
        var b = data[i + 2];

        var gray = 0.2989 * r + 0.5870 * g + 0.1140 * b;

        data[i] = gray;
        data[i + 1] = gray;
        data[i + 2] = gray;
    }

    ctx.putImageData(imageData, 0, 0);
    bg.style.backgroundImage = "url(" + canvas.toDataURL() + ")";
}

在上述代码中，首先获取到元素的背景图片URL，并创建一个图片对象。然后，在图片加载完成之后使用canvas将图片转换为灰度图片。接着，将灰度图片的URL应用到元素的background-image样式中。其中，灰度化的算法是根据RGB颜色转换成灰度值的公式来实现。

4. 设置图片Hover效果为灰度渐变

除了背景图片灰度化之外，还可以为图片添加鼠标悬停效果。当鼠标滑过图片时，图片的饱和度逐渐变为灰色效果。这个功能需要使用CSS选择器和CSS3的过渡效果来实现。

<div class="img-container">
    <img src="example.jpg">
</div>

.img-container img {
    width: 100%;
    max-width: 360px;
    transition: all .3s ease-out;
}

.img-container:hover img {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

在上述代码中，首先创建一个img-container元素来包含图片。然后，在CSS样式中设置图片的最大宽度和CSS3过渡效果。接着，为鼠标悬停状态下的图片设置灰度滤镜。当鼠标滑过img-container元素时，图片的饱和度逐渐变为灰色效果。

c语言编程笔录