背景图像不透明度淡出整个元素

Posted 2023-05-09

【中文标题】背景图像不透明度淡出整个元素

【英文标题】：Background images opacity fades out the whole element

【发布时间】：2013-11-25 07:01:05

【问题描述】：

我有一个带有背景图像的 div 元素，我正在尝试使用 Jquery 淡入和淡出背景图像。 到目前为止，该功能运行良好，但它会淡出整个 div，而不仅仅是我希望的背景。

function rentPics()

    $('#d2').css('background-image','url(' + mazdaArr[1] + ')');
    interID=setInterval (changeImage,3000);


function changeImage()
    
        $('#d2').animate(opacity: 0, 1500, function()
        $('#d2').css('background-image', 'url(' + mazdaArr[x] + ')');
        ).animate(opacity: 1, 1500);
        x++;
        if (x==mazdaArr.length)
        
            x=1;
        
    

【问题讨论】：

opacity 设置整个元素的透明度

我可以通过其他方式使用代码进行褪色吗？

这里告诉你怎么做***.com/questions/4997493/…

【参考方案1】：

如果您正在寻找简单轻量级的交叉淡入淡出，请使用 CSS transition。这不会影响元素内部的text、border 和box-shadow。

transition: background-image 1s ease-in-out;
-webkit-transition: background-image 1s ease-in-out;
-moz-transition: background-image 1s ease-in-out;
-ms-transition: background-image 1s ease-in-out;
-o-transition: background-image 1s ease-in-out;

看看这个fiddle。

Chrome、Safari 和 Opera 都支持，但我不太确定 Firefox 和 IE 是否支持

如果您要循环的图像列表更大。您可能还需要考虑先缓存图像 URL，因为我注意到第一次使用时有些闪烁/闪烁。在此处查看解决方案 - Preloading CSS Background Images

【参考方案2】：

淡入将不透明度应用于包含背景图像的整个 div，您可以在 div 后面创建一个图层来应用淡入和淡出。

【参考方案3】：

您可以让它添加或删除一个类，而不是使用 jQuery 来为不透明度设置动画。然后将过渡添加到您的 CSS，这应该会产生您想要的结果。像下面这样的东西可能会起作用。您可以查看 CSS 转换的文档here。按照惯例，唯一的缺点是 IE。

.element 
  -webkit-transition: ease 0.2 all;
  -moz-transition: ease 0.2 all;
  -o-transition: ease 0.2 all;
  -ms-transition: ease 0.2 all;
  transition: ease 0.2 all;

【参考方案4】：

使用具有绝对定位叠加层的相对容器。您的 html 应如下所示：

<div id="d2" class="image-wrapper">
  <img src="/img/1.jpg" />
  <div class="overlay"> your text goes here </div>
</div>

... 和你的 CSS：

.image-wrapper 
    position: relative;

.image-wrapper .overlay 
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: auto;

.image-wrapper img 
    display: block;

现在您可以更改图像的不透明度，而无需更改覆盖内的内容。

【讨论】：

我不确定你说得对，我没有任何文字我只想让淡入淡出效果不会影响边框、框阴影等。我只想改变图像...