Question

我想将图片和背景一起过渡。

CSS

from tkinter import *
from tkinter import ttk

class MainWindow:
    def __init__(self, top):

        _bgcolor = '#d9d9d9'  # X11 color: 'gray85'
        _fgcolor = '#000000'  # X11 color: 'black'
        _compcolor = '#d9d9d9'  # X11 color: 'gray85'
        _ana1color = '#d9d9d9'  # X11 color: 'gray85'
        _ana2color = '#d9d9d9'  # X11 color: 'gray85'
        font10 = "-family {Segoe UI} -size 10 -weight normal -slant " \
                 "roman -underline 0 -overstrike 0"
        self.style = ttk.Style()
        if sys.platform == "win32":
            self.style.theme_use('winnative')
        self.style.configure('.', background=_bgcolor)
        self.style.configure('.', foreground=_fgcolor)
        self.style.configure('.', font="TkDefaultFont")
        self.style.map('.', background=
        [('selected', _compcolor), ('active', _ana2color)])

        self.top=top
        self.top.geometry("214x96+462+349")
        self.top.title("Test")
        self.top.configure(background="#d9d9d9")
        self.top.configure(highlightbackground="#d9d9d9")
        self.top.configure(highlightcolor="black")
        self.top.resizable(0, 0)

        self.Btn_UI = Button(self.top)
        self.Btn_UI.place(relx=0.50, rely=0.21, height=24, width=100)
        self.Btn_UI.configure(activebackground="#d9d9d9")
        self.Btn_UI.configure(activeforeground="#000000")
        self.Btn_UI.configure(background="#d9d9d9")
        self.Btn_UI.configure(command=self.Btn_UI_fun)
        self.Btn_UI.configure(disabledforeground="#a3a3a3")
        self.Btn_UI.configure(foreground="#000000")
        self.Btn_UI.configure(highlightbackground="#d9d9d9")
        self.Btn_UI.configure(highlightcolor="black")
        self.Btn_UI.configure(pady="0")
        self.Btn_UI.configure(text='''New Window''')

    def Btn_UI_fun(self):
        print('button')
        root2 = Toplevel(self.top)
        second = SettingsWindow(root2)
        self.Btn_UI.configure(state="disabled")
        return 

class SettingsWindow():

    def __init__(self, master):
        self.master=master
        self.master.geometry("214x96+462+349")
        self.master.title("New")
        self.master.configure(background="#d9d9d9")
        self.master.configure(highlightbackground="#d9d9d9")
        self.master.configure(highlightcolor="black")
        self.master.resizable(0, 0)

        self.Btn = Button(self.master)  
        self.Btn.place(relx=0.50, rely=0.21, height=24, width=51)
        self.Btn.configure(text='''Quite''')
        self.Btn.configure(command=self.quite)

    def quite(self):
        p = MainWindow.__init__
        p.self.Btn_UI.configure(state="normal")
        self.master.destroy()

def main():
    root = Tk()
    Main = MainWindow(root)
    root.mainloop()

main()

jquery的

#div{
  background:black;
  width:100%;
  height:200px;
  transition: background 2.3s linear;
}

鼠标悬停时我想用背景转换图像。可能吗？我怎样才能做到这一点？ jquery还是css？

http://jsfiddle.net/ykrp7zbo/5/

Answer 1

您无法轻易转换IMG元素的来源。相反，使用div并将您想要的图像作为css背景图像放置。例如（对您的示例进行最少的更改）：

--- HTML ---
<div id="div">
   <div class="img"></div>
</div>

--- CSS ---
#div {
  background: black;
  width: 100%;
  height: 200px;
  transition: background 2.3s linear;
}
div.img {
  background-image: url('http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png');
  height: 200px;
  background-repeat: no-repeat;
  transition: background 2.3s linear;
}

---- JS ----
$(function(){
    $("#div").mouseover(function(){
      var $p = $("#div");
      $p.css("background-color","yellow");
      $(".img").css({backgroundImage: "url(https://pt.seaicons.com/wp-content/uploads/2015/07/Mushroom-1UP-icon.png)"});
    });
});

将初始图像放入CSS中，更新的图像位于javascript中，用于修改CSS。

Answer 2

如果您想将图片保留在HTML代码中，则必须设置它们并处理它们的不透明度，如下所示：

window.print()

Answer 3

你可以用纯CSS和悬停效果做同样的事情。

map_to_obj

`#div{ background-color:black; width:100%; height:200px; z-index:-999; position:absolute; } .img{ opacity:1; position:relative; } .img2{ opacity:0; position:absolute; left:0px; z-index:-1; } #div:hover{ background:yellow; } #div:hover>.img{ transition: opacity 2.3s ease-in-out; opacity:0; } #div:hover>.img2{ opacity:1; }


and HTML

`

以下是链接http://jsfiddle.net/xhgdy26w/3/

如何以与背景相同的方式过渡图像？

3 个答案: