- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有两个DIV
<div class="nextButton" onclick="showSlides()"></div>
<div class="prevButton" onclick="showSlides()"></div>
使用这个 CSS
.nextButton {
height:2em;
width:2em;
position: absolute;
top: 90%;
right: 2em;
font-size: 18px;
background: url(\'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIyNHB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0cHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZXNjLz48ZGVmcy8+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0ibWl1IiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSI+PGcgaWQ9IkFydGJvYXJkLTEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00NjcuMDAwMDAwLCAtMTkxLjAwMDAwMCkiPjxnIGlkPSJzbGljZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjE1LjAwMDAwMCwgMTE5LjAwMDAwMCkiLz48cGF0aCBkPSJNNDY4LDIwMi41IEM0NjgsMTk2LjE0ODcyNSA0NzMuMTQ4NzI1LDE5MSA0NzkuNSwxOTEgQzQ4NS44NTEyNzUsMTkxIDQ5MSwxOTYuMTQ4NzI1IDQ5MSwyMDIuNSBDNDkxLDIwOC44NTEyNzUgNDg1Ljg1MTI3NSwyMTQgNDc5LjUsMjE0IEM0NzMuMTQ4NzI1LDIxNCA0NjgsMjA4Ljg1MTI3NSA0NjgsMjAyLjUgWiBNNDgwLjY1Njg1NCwxOTYuODQzMTQ2IEw0ODIuMDcxMDY4LDE5OC4yNTczNTkgTDQ3Ny44Mjg0MjcsMjAyLjUgTDQ4Mi4wNzEwNjgsMjA2Ljc0MjY0MSBMNDgwLjY1Njg1NCwyMDguMTU2ODU0IEw0NzUsMjAyLjUgTDQ4MC42NTY4NTQsMTk2Ljg0MzE0NiBaIiBmaWxsPSIjMDAwMDAwIiBpZD0iY2lyY2xlLW5leHQtYXJyb3ctZGlzY2xvc3VyZS1nbHlwaCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDc5LjUwMDAwMCwgMjAyLjUwMDAwMCkgc2NhbGUoLTEsIDEpIHRyYW5zbGF0ZSgtNDc5LjUwMDAwMCwgLTIwMi41MDAwMDApICIvPjwvZz48L2c+PC9zdmc+\');
background-size:cover;
}
.prevButton {
height:2em;
width:2em;
position: absolute;
top: 90%;
right: 4em;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
font-size: 18px;
background: url(\'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIyNHB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0cHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZXNjLz48ZGVmcy8+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0ibWl1IiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSI+PGcgaWQ9IkFydGJvYXJkLTEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00NjcuMDAwMDAwLCAtMTkxLjAwMDAwMCkiPjxnIGlkPSJzbGljZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjE1LjAwMDAwMCwgMTE5LjAwMDAwMCkiLz48cGF0aCBkPSJNNDY4LDIwMi41IEM0NjgsMTk2LjE0ODcyNSA0NzMuMTQ4NzI1LDE5MSA0NzkuNSwxOTEgQzQ4NS44NTEyNzUsMTkxIDQ5MSwxOTYuMTQ4NzI1IDQ5MSwyMDIuNSBDNDkxLDIwOC44NTEyNzUgNDg1Ljg1MTI3NSwyMTQgNDc5LjUsMjE0IEM0NzMuMTQ4NzI1LDIxNCA0NjgsMjA4Ljg1MTI3NSA0NjgsMjAyLjUgWiBNNDgwLjY1Njg1NCwxOTYuODQzMTQ2IEw0ODIuMDcxMDY4LDE5OC4yNTczNTkgTDQ3Ny44Mjg0MjcsMjAyLjUgTDQ4Mi4wNzEwNjgsMjA2Ljc0MjY0MSBMNDgwLjY1Njg1NCwyMDguMTU2ODU0IEw0NzUsMjAyLjUgTDQ4MC42NTY4NTQsMTk2Ljg0MzE0NiBaIiBmaWxsPSIjMDAwMDAwIiBpZD0iY2lyY2xlLW5leHQtYXJyb3ctZGlzY2xvc3VyZS1nbHlwaCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDc5LjUwMDAwMCwgMjAyLjUwMDAwMCkgc2NhbGUoLTEsIDEpIHRyYW5zbGF0ZSgtNDc5LjUwMDAwMCwgLTIwMi41MDAwMDApICIvPjwvZz48L2c+PC9zdmc+\');
background-size:cover;
}
我原以为它们会完美对齐,但是,我注意到有几像素的轻微位移。
见下图。
我正在寻找有关如何让它们完美排列的建议?
最佳答案
使用比例变换而不是旋转以获得完美对齐。
.nextButton {
right: 2em;
}
.prevButton {
right: 4em;
transform: scale(-1, 1);
}
.prevButton,
.nextButton {
top: 0;
height: 2em;
width: 2em;
position: absolute;
font-size: 18px;
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIyNHB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0cHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZXNjLz48ZGVmcy8+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0ibWl1IiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSI+PGcgaWQ9IkFydGJvYXJkLTEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00NjcuMDAwMDAwLCAtMTkxLjAwMDAwMCkiPjxnIGlkPSJzbGljZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjE1LjAwMDAwMCwgMTE5LjAwMDAwMCkiLz48cGF0aCBkPSJNNDY4LDIwMi41IEM0NjgsMTk2LjE0ODcyNSA0NzMuMTQ4NzI1LDE5MSA0NzkuNSwxOTEgQzQ4NS44NTEyNzUsMTkxIDQ5MSwxOTYuMTQ4NzI1IDQ5MSwyMDIuNSBDNDkxLDIwOC44NTEyNzUgNDg1Ljg1MTI3NSwyMTQgNDc5LjUsMjE0IEM0NzMuMTQ4NzI1LDIxNCA0NjgsMjA4Ljg1MTI3NSA0NjgsMjAyLjUgWiBNNDgwLjY1Njg1NCwxOTYuODQzMTQ2IEw0ODIuMDcxMDY4LDE5OC4yNTczNTkgTDQ3Ny44Mjg0MjcsMjAyLjUgTDQ4Mi4wNzEwNjgsMjA2Ljc0MjY0MSBMNDgwLjY1Njg1NCwyMDguMTU2ODU0IEw0NzUsMjAyLjUgTDQ4MC42NTY4NTQsMTk2Ljg0MzE0NiBaIiBmaWxsPSIjMDAwMDAwIiBpZD0iY2lyY2xlLW5leHQtYXJyb3ctZGlzY2xvc3VyZS1nbHlwaCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDc5LjUwMDAwMCwgMjAyLjUwMDAwMCkgc2NhbGUoLTEsIDEpIHRyYW5zbGF0ZSgtNDc5LjUwMDAwMCwgLTIwMi41MDAwMDApICIvPjwvZz48L2c+PC9zdmc+');
background-size: cover;
}
<div class="nextButton" onclick="showSlides()"></div>
<div class="prevButton" onclick="showSlides()"></div>
如果您添加边框,您可以清楚地看到问题,并且您会注意到底部有一个小间隙,当您进行旋转时,您会移动到顶部。
.nextButton {
right: 2em;
}
.prevButton {
right: 4em;
transform: scale(-1, 1);
}
.prevButton,
.nextButton {
top: 0;
height: 2em;
width: 2em;
position: absolute;
font-size: 18px;
border:1px solid green;
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIyNHB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0cHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZXNjLz48ZGVmcy8+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0ibWl1IiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSI+PGcgaWQ9IkFydGJvYXJkLTEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00NjcuMDAwMDAwLCAtMTkxLjAwMDAwMCkiPjxnIGlkPSJzbGljZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjE1LjAwMDAwMCwgMTE5LjAwMDAwMCkiLz48cGF0aCBkPSJNNDY4LDIwMi41IEM0NjgsMTk2LjE0ODcyNSA0NzMuMTQ4NzI1LDE5MSA0NzkuNSwxOTEgQzQ4NS44NTEyNzUsMTkxIDQ5MSwxOTYuMTQ4NzI1IDQ5MSwyMDIuNSBDNDkxLDIwOC44NTEyNzUgNDg1Ljg1MTI3NSwyMTQgNDc5LjUsMjE0IEM0NzMuMTQ4NzI1LDIxNCA0NjgsMjA4Ljg1MTI3NSA0NjgsMjAyLjUgWiBNNDgwLjY1Njg1NCwxOTYuODQzMTQ2IEw0ODIuMDcxMDY4LDE5OC4yNTczNTkgTDQ3Ny44Mjg0MjcsMjAyLjUgTDQ4Mi4wNzEwNjgsMjA2Ljc0MjY0MSBMNDgwLjY1Njg1NCwyMDguMTU2ODU0IEw0NzUsMjAyLjUgTDQ4MC42NTY4NTQsMTk2Ljg0MzE0NiBaIiBmaWxsPSIjMDAwMDAwIiBpZD0iY2lyY2xlLW5leHQtYXJyb3ctZGlzY2xvc3VyZS1nbHlwaCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDc5LjUwMDAwMCwgMjAyLjUwMDAwMCkgc2NhbGUoLTEsIDEpIHRyYW5zbGF0ZSgtNDc5LjUwMDAwMCwgLTIwMi41MDAwMDApICIvPjwvZz48L2c+PC9zdmc+');
background-size: cover;
}
<div class="nextButton" onclick="showSlides()"></div>
<div class="prevButton" onclick="showSlides()"></div>
关于css - 应用于两个相等 DIV 之一的 rotate() 不能完美对齐背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55433137/
也许我在 Java 上工作的时间太长而没有真正理解它的一些基础知识。 我确实理解 == 用于对象引用相等,而 .equals() 用于对象值相等。 比较整数: Integer x = 1, y = 1
我是从一道考试题中得出这个答案的,但无法理解该解决方案的工作原理。如果值“x”和“y”相等,则此函数应该返回“true”,否则返回 False。 解决方法: function equal_boolea
我将带有表情符号的文本存储在 mysql 数据库中。 数据库、表和列设置为使用utf8mb4和utf8mb4_unicode_ci。 我可以毫无问题地输入单元格值(数据类型是 VARCHAR)。 但是
如果两个 DateTime 对象具有相同的日、月和年,我该如何比较?问题是他们有不同的小时/分钟/秒。 最佳答案 对于 DateTime 对象,没有好的方法可以做到这一点。所以你必须做,比方说,不是那
我一直想知道这个问题,所以我想我会问的。 您将看到的大多数地方都使用相同的语义逻辑来覆盖 Equals 和 GetHashCode 以实现成员平等...但是它们通常使用不同的实现: publi
苹果 CoreGraphics.framework , CGGeometry.h : CG_INLINE bool __CGSizeEqualToSize(CGSize size1, CGSize s
在最新的python 版本中, dict 保留了插入的顺序。在平等方面是否有任何变化。例如,目前以下工作。既然广告顺序很重要, future 会不会发生这种变化? 我问是因为有根本性的变化 - 以前
class VideoUserModel(models.Model): user = models.ManyToManyField(get_user_model()) viewlist
我在 COQ 中有一个有限枚举类型(比如 T),我想检查元素是否相等。这意味着,我需要一个函数 bool beq_T(x:T,y:T) 我设法定义这样一个函数的唯一方法是逐个分析。这会导致很多匹配语
我在 Windows 7(32 位)下的 MinGW 中使用 gfortran 来编译 Fortran 代码。这是文件 testequal.f 中包含的最少代码: program test
我有以下 jsp 片段: ${campaign.moderated}
我想检查两个稀疏数组是否(几乎)相等。而对于 numpy 数组,你可以这样做: import numpy as np a = np.ones(200) np.testing.assert_array_
我有以下类(class): public class MyDocuments { public DateTime registeredDate; public
这个问题已经有答案了: Is floating point math broken? (33 个回答) 已关闭 5 年前。 我在这里想做的是,我采用一个精度值(小于 1)并打印 1/n 类型的所有数字
我正在为我的arduino写一个草图,我想检查我的字符串的最后一个字符。 例如: 如果输入是 cats- 我想看看最后一个字符(在我的例子中是“-”)实际上是否 - 我使用的代码: 串行事件函数 vo
让我们开始: using System; public class Program { class A { public virtual void Do() { }
我只需要根据几个键(不是全部)来确定两个 HashMap 的相等性 除了单独访问每个字段并比较相等性之外,还有其他节省时间的方法吗? 最佳答案 我能想到的一种方法是在您的 HashMap 上存储某种“
在Java中,大写的Double可以为null。 但是如果我有 double a 和 b 并且我这样做: if (a.equals(b)) 如果其中之一为空,它会崩溃。有没有更好的方法来比较它们? 最
我正在尝试从我的旧数据库中插入表格数据。 Id 在数据库表和选择特定列中都相等。这是我的数据库。 旧数据库:sch -> 旧表:product (id, tag, url) (13, red, aaa
我正在开发一个应用程序,它在我的主视图中有一个侧边栏和两个 div。我试图在容器内平均分割两者的高度。我试过 height = 50% 但效果不太好。
我是一名优秀的程序员,十分优秀!