Question

如何更改照片的位置？

我的脚本是：

div {
  height: 800px;
  width: 100vw;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
}
div span {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 0;
  -webkit-transform: skew(20deg);
          transform: skew(20deg);
  overflow: hidden;
  border-radius: 20px;
  transition-duration: .3s;
  transition-timing-function: ease-in-out;
  -webkit-animation: at-zb 1s both;
          animation: at-zb 1s both;
}
div span:hover {
  z-index: 200;
  transition-duration: 1s;
  -webkit-animation: at-z 1s both;
          animation: at-z 1s both;
}
div span a {
  position: absolute;
  -webkit-transform: skew(-20deg);
          transform: skew(-20deg);
  background-size: cover;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
div span:nth-child(1) {
  left: -160px;
  right: calc(100% / 2 + 10px);
  transition-property: right;
}
div span:nth-child(1) a {
  -webkit-transform-origin: 0% 100%;
          transform-origin: 0% 100%;
  background-image: url("https://picsum.photos/1920/800?image=992");
  background-position: 0% 50%;
  background-repeat: no-repeat;
}
div span:nth-child(1):hover {
  right: -160px;
}
div span:nth-child(2) {
  left: calc(100% / 2 + 10px);
  right: -160px;
  transition-property: left;
}
div span:nth-child(2) a {
  -webkit-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
  background-image: url("https://picsum.photos/1920/800?image=990");
  background-position: 100% 50%;
  background-repeat: no-repeat;
}
div span:nth-child(2):hover {
  left: -160px;
}

@-webkit-keyframes at-z {
  0% {
    z-index: 1;
  }
  1%,99% {
    z-index: 9;
  }
  100% {
    z-index: 10;
  }
}

@keyframes at-z {
  0% {
    z-index: 1;
  }
  1%,99% {
    z-index: 9;
  }
  100% {
    z-index: 10;
  }
}
@-webkit-keyframes at-zb {
  0% {
    z-index: 10;
  }
  1%,99% {
    z-index: 2;
  }
  100% {
    z-index: 1;
  }
}
@keyframes at-zb {
  0% {
    z-index: 10;
  }
  1%,99% {
    z-index: 2;
  }
  100% {
    z-index: 1;
  }
}
body {
  margin: 0;
  padding: 0;
}

我想更改label1，label2，label3的位置。

和

为什么按钮不出现？

<div><span><a></a></span><span><a></a></span></div>

为什么按钮不出现？为什么按钮不出现？为什么按钮不出现？

Answer 1

您必须在ttk.Frame(root, padding=(0, 0, 0, 0))中使用指定的高度和宽度也不要使用所有的位置管理器（网格，打包，放置）。使用其中之一！

尝试以下代码：

调整place中的 x 和 y 位置以移动图像并调整高度和宽度< / strong>根据您的需要：

from tkinter import * from tkinter import ttk from PIL import ImageTk, Image root = Tk() sizeIcons = 30 f1 = ttk.Frame(root, padding=(0, 0, 0, 0), height=800, width=900) f1.grid(row=0, column=0, sticky='news') label1 = Label(f1) myimg1 = ImageTk.PhotoImage(Image.open('C:\\Users\\Michael\\Desktop\\align.left.png').resize((sizeIcons, sizeIcons), Image.ANTIALIAS)) label1['image'] = 'myimg1' label1.place(x=500, y=50, anchor=CENTER) label2 = Label(f1) myimg2 = ImageTk.PhotoImage(Image.open('C:\\Users\\Michael\\Desktop\\align.center.png').resize((sizeIcons, sizeIcons), Image.ANTIALIAS)) label2['image'] = 'myimg2' label2.place(x=50, y=50, anchor=CENTER) label3 = Label(f1) myimg3 = ImageTk.PhotoImage(Image.open('C:\\Users\\Michael\\Desktop\\align.right.png').resize((sizeIcons, sizeIcons), Image.ANTIALIAS)) label3['image'] = 'myimg3' label3.place(x=75, y=50, anchor=CENTER) root.mainloop()

如何更改照片的位置？

1 个答案: