Question

首先，我对任何想法/建议持开放态度。我希望保留主页，就像使用各种风景图像一样。我遇到的问题当然是一个图像上的可读字体颜色在另一个图像上是不可读的。所以我搜索了一些想法，发现一个黑暗的区域/背景是最专业的。太好了，现在它适用于所有光图像，但不适用于黑暗图像。所以我提出了根据图像（黑暗或光线）切换字体颜色和背景的想法。我遇到的麻烦是字体/背景切换大约1-2秒图像之前???此外，我想我想添加交叉淡入淡出或一些动画效果，以使交换机安抚。这是网站：

http://alexandredairy.com/staging/

我再次接受任何想法/建议

所以我做的第一件事就是用深色或浅色前缀命名图像，这样css就可以相应切换。所以我有二十个左右这样的图像：

Dark_Cover1_PastrDairy.jpg or Light_Cover1_PastrPoultry.jpg

我的CSS是：

/*Back ground shading so we can read text*/
.lighttextbackground
{
color:#000;
background-color:rgba(255, 255, 255, 0.35);
box-shadow:0px 0px 10px 10px rgba(255, 255, 255, 0.35);
}

.lighttextbackground a
{
color:#000;
}

.lighttextbackground p
{
color:#000;
}

.darktextbackground
{
color:#fff;
background-color:rgba(0, 0, 0, 0.35);
box-shadow:0px 0px 10px 10px rgba(0, 0, 0, 0.35);
}

.darktextbackground a
{
color:#fff;
}

.darktextbackground p
{
color:#fff;
}

我想要效果的典型HTML元素是：

<div id="pageslogan" class="slogan lighttextbackground">
....code...
</div>

至于我发布的jquery只是我认为相关的函数。如果需要，我可以肯定发布更多内容，或者您可以浏览网站并使用开发人员工具获取所有内容（F12）。

function changeImageHandler(){
    var imgSRC;
$("#inner ul>li").eq(currImg).addClass("active");
$("#inner ul>li").eq(prevImg).removeClass("active");

    loadComplete = false;
image.addClass("topImg").css({"z-index":1});
imgSRC = imageSRCLink.eq(currImg).attr("href");

imageHolder.append("<img class='bottomImg' src="+imgSRC+" alt=''>");
$(".bottomImg").css({display:"none", "z-index":0}).bind("load", loadImageHandler);
$("#imgSpinner").css({display:"block"}).stop().animate({opacity:1}, 500, "easeOutCubic");

imgName = imageSRCLink.eq(currImg).attr("href").split('/')[2];
TextReadabilityHandler(imgName.substring(0, 5));

discription.eq(currImg).css({left:$(document).width()*dragDirection, display:"block"}).animate({left:0}, 1000, "easeInOutCubic");
    discription.eq(prevImg).animate({left:$(document).width()*dragDirection*-1}, 1000, "easeInOutCubic", function(){
            discription.eq(prevImg).css({display:"none"})

        });
    }

关于上述函数的3/4，你会看到TextReadabilityHandler，它就是切换的地方：

function TextReadabilityHandler(_imgNameSwitch)
    {
        if(_imgNameSwitch == 'Light')
        {
            $("#pagetitle").attr('class', 'sitetitle lighttextbackground');
            $("#pagemenu").attr('class', 'sf-menu lighttextbackground');
            $("#pageslogan").attr('class', 'slogan lighttextbackground');
        }
        else if (_imgNameSwitch == 'Dark_')
        {
            $("#pagetitle").attr('class', 'sitetitle darktextbackground');
            $("#pagemenu").attr('class', 'sf-menu darktextbackground');
            $("#pageslogan").attr('class', 'slogan darktextbackground');
        }
        else
        { alert(_imgNameSwitch); }
    }

所以我想在图像切换时进行交叉渐变。我难倒的地方是如何实施。正如我所写，html元素更新了一个新类，并立即应用该更改。我将如何/在哪里实现.fadeOut（）/ .fadeIn（）??

谢谢

作为旁注，我尝试将我的网站提交给csscreator.com，以便对设计进行严格审核/建议而无需反馈。任何我可以获得设计批评的建议都会有所帮助。

修改

谢谢user3037493和Zeaklous。

你们都突破了我遇到的障碍。这就是你的答案在我脑中引发的。

我添加了一个自定义命名空间（为了便于阅读）

/* Text Readability switching */

var txtread = 
{
    onReady: function(_imgname)
    {
        txtread.fadeoutText(_imgname);

        txtread.fadeinText();
    },

    fadeoutText: function(_imgname)
    {
        $("#pagetitle").fadeOut(1250);
        $("#pagemenu").fadeOut(1250);
        $("#pageslogan").fadeOut(1250);
        $("#sitecopy").fadeOut(1550, txtread.TextReadabilityHandler(_imgname));
    },

    fadeinText: function()
    {
        $("#pagetitle").fadeIn(1250);
        $("#pagemenu").fadeIn(1250);
        $("#pageslogan").fadeIn(1250);
        $("#sitecopy").fadeIn(1250);
    },

    TextReadabilityHandler: function(_imgNameSwitch)
    {
        if(_imgNameSwitch == 'Light')
        {
            $("#pagetitle").attr('class', 'sitetitle lighttextbackground');
            $("#pagemenu").attr('class', 'sf-menu lighttextbackground');
            $("#pageslogan").attr('class', 'slogan lighttextbackground');
        }
        else if (_imgNameSwitch == 'Dark_')
        {
            $("#pagetitle").attr('class', 'sitetitle darktextbackground');
            $("#pagemenu").attr('class', 'sf-menu darktextbackground');
            $("#pageslogan").attr('class', 'slogan darktextbackground');
        }
        else
        { alert(_imgNameSwitch); }
    }
}

然后我在ChangeImageHandler中修改了这两行。

imgName = imageSRCLink.eq(currImg).attr("href").split('/')[2];
TextReadabilityHandler(imgName.substring(0, 5));

到

imgName = imageSRCLink.eq(currImg).attr("href").split('/')[2];
txtread.onReady(imgName.substring(0, 5));

所以整件事看起来像这样：

function changeImageHandler(){
        var imgSRC;
        $("#inner ul>li").eq(currImg).addClass("active");
        $("#inner ul>li").eq(prevImg).removeClass("active");


        loadComplete = false;
        image.addClass("topImg").css({"z-index":1});
        imgSRC = imageSRCLink.eq(currImg).attr("href");

        imageHolder.append("<img class='bottomImg' src="+imgSRC+" alt=''>");
        $(".bottomImg").css({display:"none", "z-index":0}).bind("load", loadImageHandler);
        $("#imgSpinner").css({display:"block"}).stop().animate({opacity:1}, 500, "easeOutCubic");


        imgName = imageSRCLink.eq(currImg).attr("href").split('/')[2];
       txtread.onReady(imgName.substring(0, 5));



        discription.eq(currImg).css({left:$(document).width()*dragDirection, display:"block"}).animate({left:0}, 1000, "easeInOutCubic");
        discription.eq(prevImg).animate({left:$(document).width()*dragDirection*-1}, 1000, "easeInOutCubic", function(){
            discription.eq(prevImg).css({display:"none"})

        });
    }

现在我有淡入/淡出效果，当文本块淡出时，我通过使版权淡出时间稍长（确保绝大部分内容消失）然后执行返回功能来进行快速类更改切换我的自定义命名空间中的类：

$("#sitecopy").fadeOut(1550, txtread.TextReadabilityHandler(_imgname));

当然没有什么能完美运行，出于某种原因我还没想到还有一个元素没有淡入/淡出？这是关于主题的，所以我在这里发布了一个新的SO问题。

Element refusing to fade out or in

Answer 1

抱歉，我没有足够的声誉对你的问题发表评论，而这个答案实际上只是一个评论....黑色背景的白色文字会更容易阅读。这是一个JSfiddle http://jsfiddle.net/Kyle_Sevenoaks/ZnfED/1/ 基本上，你的.slogan p的css你会把颜色变成白色并添加这个文字阴影

{text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;}

编辑添加：要在图像之前更改textbackground，请在changeImageHandler函数的开头调用TEXTREADABILITYHANDLER，并尝试在http://api.jquery.com/delay/

的imgSpinner.animate上加一个延迟

Answer 2

你可以尝试自己做this SO answer和corresponding example描述，但是根据图片，它可能比你使用实际的插件更不正确

Background Check是我可能会推荐的。它并不完全是您要求的内容，但它会更改元素的背景以及元素的背景。一个补充说，你可以简单地通过声明

来使用它

BackgroundCheck.init({
  targets: '.ui', // Select the divs to have the background changed
  images: '.thumbnail' // Select the list of images to be analyzed
});

CSS过渡＆amp;时间似乎关闭

修改

2 个答案: